Alert Dialog

A question that has to be answered before anything else: Cancel, or confirm what can't be undone.

$ pnpm dlx shadcn@latest add https://dashral.com/r/alert-dialog.json

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/alert-dialog.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/alert-dialog

Usage

example.tsx

1import { Button } from "@/components/dashral/button"
2import { AlertDialog } from "@/components/dashral/alert-dialog"
3
4<AlertDialog
5  trigger={<Button color="destructive">Delete project</Button>}
6  title="Delete this project?"
7  description="Its 12 dashboards go with it. This can't be undone."
8  color="destructive"
9  confirmLabel="Delete"
10  loadingText="Deleting…"
11  onConfirm={() => api.projects.delete(project.id)}
12/>

Examples

Waiting for the server

onConfirm returns a promise: Deleting… while it runs, and an error in the body if it fails, the dialog staying open.

Type the name to confirm

A field in the body and confirmDisabled until the name matches.

API reference

AlertDialog

Also takes every prop of Radix Alert Dialog(opens in a new tab).

Prop	Type	Default
`trigger`	`ReactElement` What opens it, e.g. a Delete button. Leave it out to open it with open / onOpenChange.	—
`title`	`ReactNode` Required: the question, which names the dialog.	—
`description`	`ReactNode` What happens if they go ahead.	—
`children`	`ReactNode` More between the text and the buttons, e.g. a field to type a name.	—
`icon`	`ReactNode` In a tinted circle beside the text.	—
`color`	`"primary" \| "destructive"` The confirm button's (and the icon's) color; destructive for deleting.	`"primary"`
`confirmLabel / cancelLabel`	`ReactNode` The buttons' labels (translated by default).	`"Continue" / "Cancel"`
`onConfirm`	`() => void \| Promise<unknown>` Runs on confirm. A promise keeps the dialog open with the button showing it's working; it closes when the promise resolves, and stays if it rejects.	—
`loadingText`	`ReactNode` Beside the spinner while onConfirm's promise runs.	—
`confirmDisabled`	`boolean` Keeps confirm off, e.g. until a name is typed.	`false`
`open / defaultOpen / onOpenChange`	Controlled or initial state.	—
`classNames`	`{ title, description, footer }` Classes for each part.	—
`className`	`string` The panel's classes.	—

Keyboard

Keys	Action
`Tab`	Move between the buttons (and anything in the body)
`Enter`or`Space`	Press the focused button: Cancel has the focus when it opens
`Escape`	Cancel

Accessibility

role="alertdialog" with aria-modal, labelled by its title and described by its description.
It can't be dismissed by clicking outside, and Cancel takes the focus when it opens, so Enter never confirms by accident.
While onConfirm runs, the confirm button is aria-busy and Escape and Cancel wait.

Motion

The panel springs in from 95% with a soft blur clearing; the backdrop fades in. Closing is quicker.