AlertDialog
A modal confirmation surface for destructive or irreversible actions.
Contract
This Tinyrack wrapper preserves Base UI behavior, React 19 refs, native props, events, and the render contract. Playground controls cover label and disabled; open remains preview-owned interaction state synchronized through component events, and Reset restores the initial state and result.
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/alert-dialog.css';Scroll inside the code area to read long lines.
Imports
import { TRAlertDialog } from '@tinyrack/ui/components/alert-dialog';Scroll inside the code area to read long lines.
Playground
Usage
Destructive confirmation permalink
Cancel is the least-destructive first action. Confirming closes the dialog and updates the live result.
Examples
State comparison permalink
Trigger the destructive confirmation, press Escape or Cancel, and verify focus returns to Delete rack. The disabled story state prevents opening.
API
The anatomy is Root, Trigger, Portal, Backdrop, Viewport, Popup, Title, Description, and Close. Every part and prop/state type is exported from @tinyrack/ui/components/alert-dialog; styles remain opt-in through the matching CSS subpath.
Root is always modal: focus stays inside while open, Escape and Close request dismissal, outside interaction does not dismiss it, and focus returns to Trigger. Use the first Close as the safe Cancel action and attach destructive work only to the danger confirmation Close; a disabled trigger or close cannot act.
For a trigger outside Root, create a typed bridge with TRAlertDialog.createHandle<Payload>(), then pass the handle to both Trigger and Root and the payload to Trigger. Portal accepts a custom container. Group confirmation controls in tr-alert-dialog-actions; they wrap into readable actions on narrow viewports.