#081
Basic and destructive
Two alert dialogs, a plain sign out confirmation and a destructive project delete, with an event log below.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Basic and destructive" pattern (@codeatlasdev/ui demo #081, feedback/alert-dialog) in my app.
Call get_demo({ ids: ["#081"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Asking the user to confirm an interrupting action such as signing out or deleting a project.
Keep these library parts, with the props and tokens the demo uses:
- AlertDialog, Button from "@codeatlasdev/ui"
Behaviour to keep:
- Sign out dialog: `bind:open={signOutOpen}`, `confirmLabel="Sign out"`, `onconfirm` and `oncancel` handlers
- Delete dialog: `bind:open={deleteOpen}`, `confirmLabel="Delete"`, `destructive` flag, only `onconfirm`
- Triggers are `<Button variant="outlined"` and `<Button variant="destructive"` with `{#snippet leading()}` icons `<LogOut size={14} />` and `<Trash2 size={14} />`
- Handlers call `push('Signed out')`, `push('Sign out cancelled')` and `push('Project deleted')`
- Log keeps the latest four entries with `slice(0, 4)` in a `<ul class="log" aria-live="polite">`
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
- AlertDialog
@codeatlasdev/ui - Button
@codeatlasdev/ui
How it is built
- Sign out dialog: `bind:open={signOutOpen}`, `confirmLabel="Sign out"`, `onconfirm` and `oncancel` handlers
- Delete dialog: `bind:open={deleteOpen}`, `confirmLabel="Delete"`, `destructive` flag, only `onconfirm`
- Triggers are `<Button variant="outlined"` and `<Button variant="destructive"` with `{#snippet leading()}` icons `<LogOut size={14} />` and `<Trash2 size={14} />`
- Handlers call `push('Signed out')`, `push('Sign out cancelled')` and `push('Project deleted')`
- Log keeps the latest four entries with `slice(0, 4)` in a `<ul class="log" aria-live="polite">`
Related
Loading source.