AlertDialog
An interrupting modal with required explanation and explicit dismissal.@gemologic/sheen · overlaysPlayground
<AlertDialog title="Remove workspace?" description="This removes the workspace and its saved views." trigger="Review removal" closeLabel="Keep workspace" />Variant matrix
Review a destructive operation
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/AlertDialog.tsx- Tokens
--sheen-color-bg-raised--sheen-color-bg-overlay--sheen-elevation-modal
Accessibility
Role: alertdialogKeyboard: Tab, Shift+Tab, EscapeDo
- Keep initial focus on the safe action for destructive decisions.
Do not
- Do not use alert dialogs for routine nonblocking status messages.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
description * | string | — | Required explanatory text associated with the alert dialog. |
title * | string | — | Accessible dialog title. |
contentId | string | — | Optional stable content element ID for an external aria-controls relationship. Must be unique in the document. |
trigger | string | — | Visible label for the opening button. |
open | boolean | — | Controlled open state; rejected close requests retain the modal. |
defaultOpen | boolean | false | Uncontrolled initial open state; portal content mounts when the theme target is ready. |
onOpenChange | (open: boolean) => void | — | Requests a change in open state without mutating controlled ownership. |
dismissible | boolean | true | Allows Escape, outside press, and the close action; false disables all three. |
closeLabel | string | — | Visible and accessible close-action label; defaults to the scoped close message. |
initialFocus | () => HTMLElement | undefined | — | Resolves an enabled focus target inside the mounted dialog. |
returnFocus | () => HTMLElement | undefined | — | Optional surviving focus target after closing, useful for triggerless dialogs. |
shortcutScope | string | — | Unique modal shortcut scope ID, defaulting to an internal stable ID. Within ShortcutProvider, opening suspends outer scopes automatically. Register modal actions under this ID; do not reuse an application/global scope. |
class | string | — | Additional classes on modal content. |
footer | JSX.Element | — | App-owned footer actions beside the built-in close action. |