#980
Text, icon and filled groups
Three ButtonGroups: text buttons (Day, Week, Month), icon buttons (Bold, Italic, Underline) and a filled plus destructive pair.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Text, icon and filled groups" pattern (@codeatlasdev/ui demo #980, inputs/button-group) in my app.
Call get_demo({ ids: ["#980"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Related actions that read as one control: a range switcher, a formatting toolbar, an approve and reject pair.
Keep these library parts, with the props and tokens the demo uses:
- Button, ButtonGroup, IconButton from "@codeatlasdev/ui"
Behaviour to keep:
- `<ButtonGroup aria-label="View range">` with three `variant="outlined" tone="neutral"` Buttons
- `<ButtonGroup aria-label="Text style">` with three outlined neutral `IconButton`s, each with an `aria-label`
- `<ButtonGroup aria-label="Review">` with a `filled` Approve and a `destructive` Reject
- The groups are stacked in a column with `gap: var(--ca-space-3)`
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 - ButtonGroup
@codeatlasdev/ui - IconButton
@codeatlasdev/ui
How it is built
- `<ButtonGroup aria-label="View range">` with three `variant="outlined" tone="neutral"` Buttons
- `<ButtonGroup aria-label="Text style">` with three outlined neutral `IconButton`s, each with an `aria-label`
- `<ButtonGroup aria-label="Review">` with a `filled` Approve and a `destructive` Reject
- The groups are stacked in a column with `gap: var(--ca-space-3)`
Related
Loading source.