Ravox KitOverlays
Alert Dialog
A question with the consequence and two ways out, for actions that can't be undone. It doesn't close on outside click, shows a loading state while the action runs and displays the error without closing. Also available as a promise: await confirm({ … }).
Settings
Toggles
Examples
With a promise: await confirm()
- #4821 · Marina Costa
- #4820 · Diego Alves
- #4817 · Lia Tanaka
Type the name to confirm
Irreversible, but not destructive
Installation
The command creates components/ui/alert-dialog.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add alert-dialogProps
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | The question, naming the object: "Delete the Loja Aurora project?". |
| description | ReactNode | — | The consequence: what happens and whether it can be undone. |
| confirmText | string | "Confirm" | The action verb ("Delete project"), never "OK". |
| cancelText | string | "Cancel" | Text of the safe way out. |
| variant | "default" | "destructive" | "default" | destructive: pink button, warning icon and focus starts on Cancel. |
| onConfirm | () => unknown | Promise<unknown> | — | Runs on confirm. If it returns a promise, the button loads and the dialog waits; if it fails, the error message appears and nothing closes. |
| confirmDisabled | boolean | false | Disables the confirm button (e.g. until the person types the name of what they are about to delete). |
| onCancel | () => void | — | Called when the person backs out (button or Esc). |
| trigger | ReactElement | — | Element that opens the confirmation (a <Button>). |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — | Controlled or not, as in Dialog. |
| children | ReactNode | — | Extra content between the description and the buttons (what will be deleted, a confirmation field). |
| useConfirm() | (options) => Promise<boolean> | — | Asks for confirmation from anywhere and waits for the answer. Needs an <AlertDialogProvider> near the root. |