#103
Variants and duration
Eight buttons that trigger toasts: five variants and three duration cases, with one Toaster mounted.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Variants and duration" pattern (@codeatlasdev/ui demo #103, feedback/toast) in my app.
Call get_demo({ ids: ["#103"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Non-blocking feedback after an action, such as saved, failed or an available update.
Keep these library parts, with the props and tokens the demo uses:
- Button, Toaster, toast from "@codeatlasdev/ui"
Behaviour to keep:
- `<Toaster />` mounted once, toasts fired with `toast` from `@codeatlasdev/ui`
- Variants: `toast.show(`, `toast.success(`, `toast.error(`, `toast.warning(` and `toast.info(` with a message string
- Persistent: `{ variant: 'info', duration: 0 }` passed as second argument of `toast.show(`
- Timed: `toast.success('Gone in 1 second.', 1000)` and `toast.info('Stays for 8 seconds.', 8000)`
- All triggers are `<Button variant="outlined"` in two labelled groups, Variants and Duration
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
- Button
@codeatlasdev/ui - Toaster
@codeatlasdev/ui
How it is built
- `<Toaster />` mounted once, toasts fired with `toast` from `@codeatlasdev/ui`
- Variants: `toast.show(`, `toast.success(`, `toast.error(`, `toast.warning(` and `toast.info(` with a message string
- Persistent: `{ variant: 'info', duration: 0 }` passed as second argument of `toast.show(`
- Timed: `toast.success('Gone in 1 second.', 1000)` and `toast.info('Stays for 8 seconds.', 8000)`
- All triggers are `<Button variant="outlined"` in two labelled groups, Variants and Duration
Related
Loading source.