#004
Sizes
The three button sizes side by side: small, medium and large.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Sizes" pattern (@codeatlasdev/ui demo #004, inputs/button) in my app.
Call get_demo({ ids: ["#004"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Choosing button density: `sm` in toolbars and tables, `md` by default, `lg` for hero or touch-first actions.
Keep these library parts, with the props and tokens the demo uses:
- Button from "@codeatlasdev/ui"
Behaviour to keep:
- `size="sm"` labelled Small
- `size="md"` labelled Medium
- `size="lg"` labelled Large
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
How it is built
- `size="sm"` labelled Small
- `size="md"` labelled Medium
- `size="lg"` labelled Large
Related
Loading source.