Skip to main content
Urbicon UI
source

ConfirmDialog

Pre-configured dialog for confirming a single, often destructive action. Replaces window.confirm() with a styleable, focus-trapped modal that supports async onConfirm handlers.

Playground

Loading syntax highlighting...

01 Examples

Destructive confirmation

Loading syntax highlighting...

Async onConfirm — auto-loading

When onConfirm returns a promise the dialog disables both buttons, blocks dismissal, shows a spinner on the confirm button, then auto-closes on success.
Loading syntax highlighting...

02 Customization

intent drives both the dialog accent strip and the confirm-button colour. The neutral intent upgrades the confirm button to primary for visual affordance — override via confirmIntent if your design system needs different tones.

For confirmations with richer markup (a list of consequences, a typed-confirmation field), pass content through the default children snippet — it renders below the description.

03 Accessibility

  • Inherits focus trap, Escape-to-cancel, and backdrop-click-to-cancel from the underlying Dialog. While an async onConfirm is pending all three are disabled so the user cannot navigate away mid-action.
  • The cancel/confirm buttons are real <button> elements — keyboard navigation (Tab, Enter, Space) works without extra wiring.
  • Default labels resolve via bt('button.confirm') / bt('button.cancel') — translate them through the i18n package, or override per-call via confirmLabel / cancelLabel.

04 API Reference

13 props
13 props 1 required

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...
llm.txt