#013
Icon only and toast
An icon-only CopyButton and a labelled one that shows a toast after copying, with a Toaster mounted.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Icon only and toast" pattern (@codeatlasdev/ui demo #013, inputs/copy-button) in my app.
Call get_demo({ ids: ["#013"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Copying links or snippets where a compact icon is enough or where a visible confirmation toast is wanted.
Keep these library parts, with the props and tokens the demo uses:
- CopyButton, Toaster from "@codeatlasdev/ui"
Behaviour to keep:
- `<Toaster />` is rendered alongside the buttons
- `<CopyButton value="icon-only" label="" />` is icon-only via an empty `label`
- `<CopyButton value="https://ui.codeatlas.com.br" label="Copy link" toast="Link copied" />`
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
- CopyButton
@codeatlasdev/ui - Toaster
@codeatlasdev/ui
How it is built
- `<Toaster />` is rendered alongside the buttons
- `<CopyButton value="icon-only" label="" />` is icon-only via an empty `label`
- `<CopyButton value="https://ui.codeatlas.com.br" label="Copy link" toast="Link copied" />`
Related
Loading source.