Confirm Dialog
Purpose-built modal for confirm/cancel prompts — title, message, and Cancel/Confirm actions wired up on top of zyra-modal.
API
All inputs and configuration options for zyra-confirm-dialog.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Two-way bound visibility state via [(open)] |
title | string | 'Are you sure?' | Dialog heading |
message | string | '' | Body text shown when no content is projected |
tone | 'default' | 'danger' | 'default' | Controls the Confirm button color |
confirmLabel | string | 'Confirm' | Text for the confirm button |
cancelLabel | string | 'Cancel' | Text for the cancel button |
loading | boolean | false | Shows a loading state on the confirm button and disables both actions |
confirmed (output) | void | - | Emits when Confirm is clicked (dialog does not auto-close) |
cancelled (output) | void | - | Emits when the dialog is dismissed via Cancel, ESC, or backdrop click |
Tokens
CSS custom properties zyra-confirm-dialog reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Message text--zyra-color-foreground-muted | var(--zyra-color-text-muted) | Color of the body message text. Everything else (panel, backdrop, title) comes from zyra-modal — see its Tokens section. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Inherits role="dialog" and aria-modal="true" from zyra-modal
- Focus is trapped inside the dialog while open, and ESC dismisses it
- Cancel and Confirm buttons are disabled while loading to prevent double submission