#981
Split button and vertical
A split button (Publish plus a chevron DropdownMenu trigger) and a vertical ButtonGroup of two icon buttons.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Split button and vertical" pattern (@codeatlasdev/ui demo #981, inputs/button-group) in my app.
Call get_demo({ ids: ["#981"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: A primary action with its alternatives behind a menu, or a stacked pair of icon controls.
Keep these library parts, with the props and tokens the demo uses:
- Button, ButtonGroup, DropdownMenu, DropdownMenuItem, IconButton from "@codeatlasdev/ui"
Behaviour to keep:
- `<ButtonGroup aria-label="Publish">` with a `filled` Publish Button followed by a `DropdownMenu` whose `triggerChild` is a filled `IconButton` named "More publish options"
- The menu has Schedule and Save as draft, aligned to the end
- `<ButtonGroup aria-label="Pages" orientation="vertical">` with two outlined neutral IconButtons (Previous page, Next page)
- Both groups sit in a wrapping row with `gap: var(--ca-space-6)`
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 - DropdownMenu
@codeatlasdev/ui - DropdownMenuItem
@codeatlasdev/ui - IconButton
@codeatlasdev/ui
How it is built
- `<ButtonGroup aria-label="Publish">` with a `filled` Publish Button followed by a `DropdownMenu` whose `triggerChild` is a filled `IconButton` named "More publish options"
- The menu has Schedule and Save as draft, aligned to the end
- `<ButtonGroup aria-label="Pages" orientation="vertical">` with two outlined neutral IconButtons (Previous page, Next page)
- Both groups sit in a wrapping row with `gap: var(--ca-space-6)`
Related
Loading source.