shadcn.io is an independent project built on shadcn/ui
The description is one sentence: the task will be marked completed. Cancel and Confirm are the only actions. The task is not updated.
Keep it this short when the outcome is obvious and easy to undo. If it cannot be undone, say so on a destructive Button. In Svelte, Ark UI does not mark the task complete.
Installation
Anatomy
Usage
<AlertDialog><AlertDialogTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Open Dialog</Button>{/snippet}</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Mark as Complete?</AlertDialogTitle><AlertDialogDescription>This task will be marked as completed.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogClose>{#snippet asChild(props)}<AlertDialogAction {...props()}>Confirm</AlertDialogAction>{/snippet}</AlertDialogClose></AlertDialogFooter></AlertDialogContent></AlertDialog>FAQ
When is a short confirmation enough?
For reversible, low-impact actions like completing a task or changing a preference. Use a detailed confirmation when the action can't be undone and people need context to decide.
Do I still need a description?
Yes. AlertDialogDescription is announced with the title, so even one sentence confirms to screen reader users what they're about to do.
Should I use a toast instead?
Not for confirming. A dialog asks before the action happens; a toast tells people after it did. Many apps do both: confirm first, then a toast that it worked.
API Reference
Alert Dialog
Sets props. The rest is on the Alert Dialog page.
Button
Sets props and variant="outline". The rest is on the Button page.
