Modal
ModalConfirm
Confirmation dialog with danger/warning/info variants, confirm and cancel actions.
Modal
The Modal category provides three composable dialog components built on top of Nuxt UI's UModal. XAModal is the general container; XAModalConfirm handles destructive action confirmations; XAModalKeyValue presents structured data in a readable format. All three support both v-model and internal open-state management, and expose open() / close() methods via defineExpose.
Components
<XAModalConfirm />
A focused confirmation dialog. The icon and button color adapt to the variant prop (danger, warning, info). Supports loading state during async confirm actions.
<XAModalConfirm
v-model:open="showConfirm"
title="Delete User"
message="This action cannot be undone. The user and all associated data will be permanently deleted."
variant="danger"
confirm-text="Delete"
:loading="deleting"
@confirm="deleteUser"
@cancel="showConfirm = false"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | Boolean | undefined | v-model open state |
open | Boolean | undefined | v-model:open alternative |
title | String | 'Confirm' | Dialog title |
message | String | '' | Body message text |
variant | String | 'info' | Visual style: danger warning info |
color | String | '' | Alternative to variant using color names |
confirmText | String | 'Confirm' | Confirm button label |
cancelText | String | 'Cancel' | Cancel button label |
icon | String | '' | Override the auto-selected variant icon |
loading | Boolean | false | Show loading state on the confirm button |
Events
| Event | Payload | Description |
|---|---|---|
confirm | — | Emitted when the confirm button is clicked |
cancel | — | Emitted when the cancel button is clicked |
AI Context
component: XAModalConfirm
package: "@xenterprises/nuxt-x-app"
category: Modal
use-when: >
Use XAModalConfirm for destructive or irreversible actions (delete, revoke,
deactivate) where user intent must be confirmed. Use variant="danger" for
destructive actions. Supports loading state for async confirm handlers.