Components
Button Group
Segmented controls: related options fused into one bordered strip.
Default
<ButtonGroup>
<Button variant="outline">Bold</Button>
<Button variant="outline">Italic</Button>
<ButtonGroupSeparator />
<Button variant="outline">Link</Button>
</ButtonGroup>Segmented
<div class="inline-flex overflow-hidden rounded-lg border border-border">
<button class="bg-bg-surface px-4 py-2 text-xs font-medium">All</button>
<button class="border-l border-border px-4 py-2 text-xs">Apps</button>
<button class="border-l border-border px-4 py-2 text-xs">Typefaces</button>
</div>Pill, accent selection
Split
Split button — a primary action plus an icon trigger for secondary options, divided by a
ButtonGroupSeparator. Pair the trigger with a Dropdown Menu for the extra actions.
<ButtonGroup>
<Button variant="secondary">Publish</Button>
<ButtonGroupSeparator />
<Button size="icon" variant="secondary" aria-label="More publish options">
<ChevronDownIcon />
</Button>
</ButtonGroup>Orientation
<ButtonGroup orientation="vertical">
<Button variant="outline">Publish</Button>
<Button variant="outline">Save draft</Button>
<Button variant="outline">Archive</Button>
</ButtonGroup>Size
Small and large — set size on the buttons; the group keeps them seamless.
Nested
Nested groups auto-gap so related clusters read apart.
<ButtonGroup>
<ButtonGroup>
<Button variant="outline">Undo</Button>
<Button variant="outline">Redo</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline">Publish</Button>
</ButtonGroup>
</ButtonGroup>With input
Input flexes to fill the group; Input Group prefixes it with a
ButtonGroupText addon. Dropdown Menu, Select, and Popover slot in
the same way — swap the trailing Button for that trigger and the group seams
it flush with adjacent controls.
{/* Input */}
<ButtonGroup>
<Input placeholder="buenalabs.io/notes" />
<Button variant="outline">Copy</Button>
</ButtonGroup>
{/* Input Group — text addon */}
<ButtonGroup>
<ButtonGroupText>buenalabs.io/</ButtonGroupText>
<Input placeholder="note-slug" />
</ButtonGroup>Markdown for agents: /design/button-group.md · spec: /design.md