ConfirmDialog

Confirmation modal with cancel and confirm buttons; danger tone for destructive actions. The size prop (xs, sm, md, lg, xl) sets the dialog width and padding.

Jump to API reference

Import

Vue

import { UiConfirmDialog } from '@ziyarago/ui/vue'

Default

Vue

<UiConfirmDialog
  title="Confirm booking"
  description="Reserve this room for 5 nights?"
  confirm-label="Reserve"
  :open="open"
  @close="open = false"
 />

Danger

Vue

<UiConfirmDialog
  title="Cancel booking"
  description="This cannot be undone. A fee may apply."
  tone="danger"
  confirm-label="Cancel booking"
  cancel-label="Keep it"
  :open="open"
  @close="open = false"
 />

Sizes

Vue

<UiConfirmDialog
  size="sm"
  title="Confirm booking"
  description="Reserve this room for 5 nights?"
  confirm-label="Reserve"
  :open="open"
  @close="open = false"
 />

API reference

Small Modal with a message and Cancel/Confirm buttons; use to confirm destructive or irreversible actions.

Props

PropType and valuesDefaultDescription

openbooleanfalseShows the dialog when true; renders nothing when false.

titlestring—Dialog heading.

descriptionstring—Explanation shown in the body.

tonedefaultdanger'default'Danger turns the confirm button red; any other value gives the primary button.

confirmLabelstring'Confirm'Confirm button text.

cancelLabelstring'Cancel'Cancel button text.

loadingbooleanfalseShows a spinner on the confirm button.

sizexssmmdlgxl'md'Scale of dialog width and padding.

Events

Vue: @name. React: onName.

confirmCalled when the confirm button is clicked.

cancelCalled on Cancel, the close icon, the Escape key or a click on the scrim.

Notes

Close handling goes through cancel, there is no separate close event.
The dialog does not close itself: set open to false in both handlers.