Skip to main content

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.

Interactive Component Playground

TuxModal Workbench

Presets:

Click button to launch interactive modal with current prop state.

Properties Inspector6 configurable knobs
Modal Titletitle
Eyebrow Categoryeyebrow
Modal Body Contentbody
Primary Button IntentconfirmIntent
Primary Button LabelconfirmLabel
Include Action FootershowFooter
true
Dynamic Component Syntax
<tux-button intent="primary" @click="open = true">Open Confirm Operations Dispatch</tux-button>
<tux-modal v-model:open="open" eyebrow="action · field operations" title="Confirm Operations Dispatch">
  <p>Staged parameters will be dispatched to the RELLIS Proving Grounds telemetry server.</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="primary" @click="open = false">Dispatch Now</tux-button>
    </div>
  </template>
</tux-modal>

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>