#492
Description and action
Three buttons that fire a toast with a description, with one inline action, and with both.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Description and action" pattern (@codeatlasdev/ui demo #492, feedback/toast) in my app.
Call get_demo({ ids: ["#492"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: A toast that needs a secondary line of detail or a single shortcut such as Undo, Open or Mark as qualified.
Keep these library parts, with the props and tokens the demo uses:
- Button, Toaster, toast from "@codeatlasdev/ui"
Behaviour to keep:
- `<Toaster />` mounted once, `toast` imported from `@codeatlasdev/ui`
- Description: `toast.success('Task completed', { description: 'Next step scheduled for tomorrow 09:00' })`
- Action: `toast.warning('Sequence paused for Acme', {` with `action: { label: 'Mark as qualified'`, whose `onClick` runs and dismisses the toast; an actionable toast lasts 8 seconds
- Both: `description` and `action` in the same options object
- All triggers are `<Button variant="outlined"`
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, `toast` imported from `@codeatlasdev/ui`
- Description: `toast.success('Task completed', { description: 'Next step scheduled for tomorrow 09:00' })`
- Action: `toast.warning('Sequence paused for Acme', {` with `action: { label: 'Mark as qualified'`, whose `onClick` runs and dismisses the toast; an actionable toast lasts 8 seconds
- Both: `description` and `action` in the same options object
- All triggers are `<Button variant="outlined"`
Related
Loading source.