components · actions & commands
TuxConfirmDialog
Blocking confirmation modal preset for high-impact or destructive actions. Standardizes cancel/confirm button intent, async loading states, and keyboard traps.
interactive showcase
Modal Variants
Click a button to trigger a dialog preset with preconfigured button intents and styling:
usage syntax
Code snippet
vue
<TuxConfirmDialog
v-model:open="isOpen"
title="Revoke Research API Key?"
eyebrow="Destructive Action"
variant="destructive"
:loading="isLoading"
@confirm="handleConfirm"
>
This action cannot be undone. All active roadside sensors relying on this key
will immediately drop connection.
</TuxConfirmDialog>api reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| v-model:open | boolean | false | Two-way visibility binding for the dialog modal. |
| title | string | required | Primary headline for the dialog. |
| variant | "destructive" | "primary" | "warning" | "destructive" | Controls button intent and default labels. |
| loading | boolean | false | Displays spinner on confirm button during async dispatch. |
| confirmDisabled | boolean | false | Disables confirm button (e.g. until confirmation keyword is typed). |