A modal that interrupts with something important and waits for an answer.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/alert-dialogPlayground
Tones
Sizes
States
Options
Tone
Size
State
Icons animation
Media
Description
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/alert-dialog
Tones
Neutral confirms a change. Destructive focuses Cancel and ignores scrim clicks.
Size
Media
Description
Accessibility
- role alertdialog, labelled by the title and described by the text.
- Focus starts on Cancel for Destructive and on the action otherwise.
- A scrim click does nothing for Destructive.
- The error is announced as it appears.
Motion
- The page dims first. The dialog rises 12 px from 0.98 over 240 ms, 40 ms later, and the badge pops in.
- Leaving takes 160 ms.
- The Mobile sheet uses a 380/36 spring.
- An error shakes the dialog by 4 px.
- With reduced motion, it fades in and there is no shake.
Responsive behavior
- Default 440, Small 320 on Web.
- Default is a bottom sheet with Large stacked actions on Mobile. Small stays a centred card.
Performance
- Shares Modal with Dialog: a native dialog that mounts only while open.
- The error shake plays once when status turns to error, and is skipped when motion is off.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import AlertDialog from @/components/fetaui/alert-dialog after installing it.
- title and actionLabel are required. Write the title as a question and the label as a verb that matches it.
- onAction does not close it: run the work, then set status or open. loading locks it, error shows an Alert and relabels the action Try again.
- tone="destructive" focuses Cancel and ignores scrim clicks. The loading and error states in the demo are timers. Composes Alert, AlertBadge, Button and Modal.
Related
DialogComponentA window over the page for one focused task, with the page behind made inert. On Mobile it is a bottom sheet.AlertComponentA callout that asks for attention without taking over the page. Card, Inline and Banner in six tones.ButtonComponentOne family for every action, with a label, optional icons and a shortcut key.ToastComponentA short message that melts from a pill into a card. Eight kinds, with stacking and swipe.SheetComponentContent that complements the page, sliding in from an edge and floating 8 px in from it.