Destructive
Primary confirm
Confirm with icons
Icon-only footer (both actions)
Icon-only confirm, text cancel
Icon-only cancel, text confirm
Custom footer (IconButton)
Loading
Frozen previews of loading on the confirm action. Overlay dismiss is disabled while loading.
Loading (try it)
Open the dialog and confirm — loading runs for ~800ms before the dialog closes.
Custom labels
Title only (no description)
Custom body
Icon-only trigger
Animation variants
animationVariant — click each control to compare press feedback.
enterAnimationVariant — open and close each panel to compare fluid spring motion (default, spring, zoom) vs legacy ease presets.
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| open | Required | boolean | — | Controlled visibility. |
| onClose | Required | () => void | — | Called when cancel/overlay dismiss fires. |
| title | Required | string | — | Dialog heading. |
| destructive | Optional | boolean | — | Styles confirm as destructive. |
| loading | Optional | boolean | — | Spinner on confirm; blocks overlay dismiss. |
| confirmLeftIcon | Optional | ReactNode | — | Icon before confirm label (or icon-only confirm). |
| confirmRightIcon | Optional | ReactNode | — | Icon after confirm label; also used for icon-only if no left icon. |
| cancelLeftIcon | Optional | ReactNode | — | Icon before cancel label (or icon-only cancel). |
| confirmIconOnly | Optional | boolean | — | Icon-only confirm via IconButton; confirmLabel is aria-label. |
| cancelIconOnly | Optional | boolean | — | Icon-only cancel via IconButton; cancelLabel is aria-label. |
| footer | Optional | ReactNode | — | Custom footer (replaces default actions). |
| onConfirm | Optional | () => void | — | Primary action handler. |
| animationVariant | Optional | PressAnimationVariant | default | Press animation — default, none, ripple, scale, sink, lift, pulse, or glow. |
| enterAnimationVariant | Optional | EnterAnimationVariant | default | Panel enter/exit — default and spring use fluid spring physics (Animate UI–style); zoom is a stronger pop; subtle keeps legacy ease motion; fade, slide-*, scale, or none. |
| overlayBlur | Optional | DialogOverlayBlur | number | — | Passed to Dialog — backdrop blur preset or custom px. |