component

TuxModal

Wraps UModal. Pass title (rendered with the gold-bar heading--bold utility) and an optional eyebrow for editorial rhythm. Body goes in the default slot; footer in #footer.

Note: the HTML tab on this page captures the trigger button, not the modal itself — when closed, the modal doesn't exist in the DOM. Open it and inspect via browser devtools.

basic

Title + eyebrow

<tux-button intent="primary" @click="open = true">Open basic modal</tux-button>
<tux-modal v-model:open="open" eyebrow="action" title="Confirm changes">
  <p>A basic modal with an eyebrow label above the title. The gold bar under
     the title is the tux signature.</p>
</tux-modal>

with footer

Confirm pattern

<tux-button intent="destructive" icon="lucide:trash-2" @click="open = true">
  Delete record…
</tux-button>
<tux-modal v-model:open="open" eyebrow="destructive action" title="Delete record?">
  <p>This will permanently remove the record and all associated revisions.
     Consumers with outstanding references will see a 404.</p>
  <template #footer>
    <div class="flex justify-end gap-2 w-full">
      <tux-button intent="ghost" @click="open = false">Cancel</tux-button>
      <tux-button intent="destructive" @click="open = false">Delete</tux-button>
    </div>
  </template>
</tux-modal>