Alert Dialog

A blocking confirmation for a consequential action that requires an explicit choice.

Adopted

Family: Transaction
Available import: @/components/ui/alert-dialog
Status: Thorbis wrapper and live specimen ship here.

Live Thorbis specimenalert-dialog

Use: Use before destructive or irreversible commits when the consequence cannot be inferred from the trigger.
Avoid: Do not interrupt routine, reversible work or replace a full workflow route.

Use this component

GitHub source links require access to the private Thorbis design repository.

Wrapper source Repository and dependencies

Value exports: AlertDialog
AlertDialogAction
AlertDialogCancel
AlertDialogContent
AlertDialogDescription
AlertDialogFooter
AlertDialogHeader
AlertDialogOverlay
AlertDialogPortal
AlertDialogTitle
AlertDialogTrigger
Type exports: None.

Setup, styles, and dependencies

These are React wrappers in the Thorbis design repository, not an installable npm UI package. In this repository, @/ resolves to src/ through tsconfig.json.

Use the repository's package.json and package-lock.json for dependencies. Load src/styles.css once at the application root for global tokens, typography, and themes. The wrappers compose colocated StyleX owners; include the generated token CSS and extracted StyleX output.

For another project, bring the wrapper and its transitive local imports, configure the alias, install the dependencies those files use, and provide the same token and style setup. Review the source before copying; the direct imports below are not a complete dependency closure.

Interactive examples require client-side React. This TanStack Start site server-renders and hydrates React; another host must hydrate or render the component on the client. Example code is the same TypeScript source used by its live preview.

Direct imports in this wrapper:

./dialog.stylex
@/components/ui/button
@radix-ui/react-alert-dialog
@stylexjs/stylex
react

A standalone usage example has not been published for this component yet. Inspect the wrapper source and existing live specimen; do not infer a different API from the upstream component name.

Adoption contract

Start from the ShadCN accessible source primitive; keep upstream keyboard and focus behavior.
Use Thorbis color, type, space, radius, shadow, and motion tokens only.
Design hover, focus, selected, disabled, loading, empty, error, offline, and reduced-motion states where they apply.
Verify desktop and 390px mobile, keyboard order, accessible names, and stable async geometry.

Official ShadCN component directory

Applied bookmark research

Reviewed 2026-09-06. These examples reinforce the existing owners; they do not introduce another visual style or claim the product behavior is implemented. Read the 26-source review and access limits.

Immediate acknowledgment is not confirmed success

A fast animation can falsely tell a person that money moved, a message arrived, or an assignment was saved.

Distinguish initiation, pending work, confirmed outcome, failure, and uncertain outcome. Show what is known. A repeated request needs a deliberate recovery path, not a second untracked business action.

Thorbis example. Collect payment keeps its label while the request is pending. A timeout says the result is not yet known and provides a way to check it; it does not invite an unconditional second charge. Confirmation names the actual result.

Verify. Review pending, explicit rejection, timeout after submission, reconnect, and repeat activation. Confirm that copy does not claim settlement from mere request acceptance and that a recoverable draft is preserved.

Do not import. No optimistic completion for consequential work, invented delivery guarantee, or success decoration that hides uncertainty.

Open the resilience skill · Evidence: 7 Principles of Rich Web Applications; Philosophy; Web Interface Guidelines

A control keeps its meaning through every state

A button that changes width, a field that loses input, or a dialog that loses focus breaks the task even when the resting design looks precise.

Review the approved primitive as a sequence: resting, focused, activated, pending, resolved, and recovered. Keep the action label and footprint stable, associate errors with their fields, and preserve a visible keyboard path.

Thorbis example. Save estimate remains Save estimate while its state mark changes. A validation error keeps the entered values, explains the repair beside the field, and moves focus only when the interaction calls for it.

Verify. Test Tab, Shift-Tab, Enter, Escape where applicable, paste, invalid input, rapid activation, and a slow response. Repeat at 390px, in both themes, with zoom and reduced motion.

Do not import. No hand-built duplicate primitive, hidden label, disabled browser zoom, or borrowed shadow-only outer edge that violates D-017.

Open the ui skill · Evidence: Web Interface Guidelines; Invisible Details; components.build; Details that make interfaces feel better