Components / Overlays
Confirm dialog
Confirm first, then run an async action with a pending state and an inline error.
@fabrials/ui
Removed: 0
Nothing asked yet
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { ConfirmDialog, ConfirmActionButton, ConfirmProvider, useConfirm } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
title | ReactNode | What will happen. |
description | ReactNode | What it affects. |
details | ReactNode | Optional list of the affected records. |
confirmLabel | ReactNode | Names the action. |
pendingLabel | ReactNode | Shown while the action runs. |
destructive | boolean | Uses the destructive confirm button. |
onConfirm | () => Promise | Resolve { ok: false, error } or throw to keep the dialog open with the error. |
open | boolean | ConfirmDialog is controlled with onOpenChange. ConfirmActionButton owns its trigger and state. |
finalFocus | false | ref | (closeType, outcome) => element | Where focus lands on close; outcome is confirmed or dismissed. A confirmed action that removes its trigger names the element that now holds the result; Cancel and Escape still return to the trigger. |
useConfirm() | (options) => Promise<boolean> | Awaitable: true on confirm, false for Cancel, Escape, the backdrop or an unmounted provider. Mount ConfirmProvider once; without it the function is window.confirm. Questions asked while one is open wait their turn. |
Behavior
The confirm button shows a spinner while the action runs and cannot be pressed twice. A failure stays inline and keeps the dialog open; success closes it. The host performs the action. useConfirm is for flows that can await; a guard that must answer synchronously (back, forward, unload) keeps window.confirm.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.