shadcn.io is an independent project built on shadcn/ui
Three groups of outline buttons. The first is Left, Middle, and Right at the default size. The second is Small and Group, smaller. The third is Large and Group, larger. Neighbors share a border. Arrow keys do not move inside a group.
Start here when several actions should read as one control. A choice that stays pressed is a Toggle Group. In Solid, Ark UI does not remember which button was pressed.
Installation
Anatomy
Usage
<div class="flex flex-col gap-4">
<ButtonGroup aria-label="Position">
<Button variant="outline">Left</Button>
<Button variant="outline">Middle</Button>
<Button variant="outline">Right</Button>
</ButtonGroup>
<ButtonGroup aria-label="Small group">
<Button size="sm" variant="outline">
Small
</Button>
<Button size="sm" variant="outline">
Group
</Button>
</ButtonGroup>
<ButtonGroup aria-label="Large group">
<Button size="lg" variant="outline">
Large
</Button>
<Button size="lg" variant="outline">
Group
</Button>
</ButtonGroup>
</div>FAQ
How do I set the size of the buttons in the group?
ButtonGroup has no size prop. Set size on every Button. This demo leaves Left, Middle and Right at the default size, sets sm on Small and Group, and sets lg on Large and Group.
Which variant are these buttons?
Every button sets variant to outline. Use the same variant across a group so the shared border lines up. None of these buttons run an action.
Why are there three groups?
Each ButtonGroup is one size sample. They sit in a column with gap-4, so each row keeps its own border. Each group also has an aria-label, so a screen reader names the group it enters.
How do I lay these buttons out in a column?
Set orientation to vertical on ButtonGroup. This demo omits it, so the groups stay horizontal. The root sets data-orientation to the value you pass.
Do the arrow keys move between Left, Middle and Right?
No. Tab moves from button to button, and Enter or Space activates the focused button. The group does not handle Arrow keys, Home or End.
Can one button stay selected?
ButtonGroup renders role="group" and does not store a pressed value. A choice that stays pressed is a Toggle Group, or buttons you switch yourself, as in the Segmented Control example.
API Reference
Button Group
Sets aria-label="Position", aria-label="Small group" and aria-label="Large group". The rest is on the Button Group page.
Button
Sets variant="outline", size="sm" and size="lg". The rest is on the Button page.
