ConfirmDialog
Markdown for agentsAccessible confirmation dialog with async pending state, destructive variant and cancellable actions, built on Dialog.
npx slipstream-ui@latest add confirm-dialogDestructive and async confirmations (interactive)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open / onOpenChange | boolean, (open) => void | required | Controlled visibility. |
| title | string | required | Dialog title (accessible name). |
| description | string | — | Supporting line under the title. |
| onConfirm | () => void | Promise<void> | required | Confirm handler; a promise shows a pending state. |
| confirmLabel / cancelLabel | string | 'Confirm' / 'Cancel' | Button labels. |
| destructive | boolean | false | Red confirm button for destructive actions. |
Accessibility
- Inherits Dialog: focus trap, Escape, backdrop dismissal and focus restoration.
- Confirm shows aria-busy while a promise runs; dismissal is blocked.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.