#084
Confirmation
A small dialog asking to delete an item, with Cancel and Delete buttons in the actions snippet.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Confirmation" pattern (@codeatlasdev/ui demo #084, feedback/dialog) in my app.
Call get_demo({ ids: ["#084"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Confirming a destructive action when you need custom footer buttons instead of the AlertDialog defaults.
Keep these library parts, with the props and tokens the demo uses:
- Dialog, Button from "@codeatlasdev/ui"
Behaviour to keep:
- `<Dialog` with `bind:open`, `title="Delete this item?"` and `size="sm"`
- `description=` text says the action cannot be undone
- `{#snippet actions()}` holds `<Button variant="ghost"` Cancel and `<Button variant="destructive"` Delete
- Delete runs `confirmed = true; open = false;` and shows `Item deleted.` with `aria-live="polite"`
- Trigger is `<Button variant="destructive"` with a `<Trash2 size={14} />` icon in `{#snippet leading()}`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
How it is built
- `<Dialog` with `bind:open`, `title="Delete this item?"` and `size="sm"`
- `description=` text says the action cannot be undone
- `{#snippet actions()}` holds `<Button variant="ghost"` Cancel and `<Button variant="destructive"` Delete
- Delete runs `confirmed = true; open = false;` and shows `Item deleted.` with `aria-live="polite"`
- Trigger is `<Button variant="destructive"` with a `<Trash2 size={14} />` icon in `{#snippet leading()}`
Related
Loading source.