Button Group
<div class="button-group" role="group" aria-label="Text alignment"> <button class="btn btn-outline" type="button">Left</button> <button class="btn btn-outline" type="button">Center</button> <button class="btn btn-outline" type="button">Right</button></div>The group flattens the inner corners and collapses the shared edges to a single border, so the controls read as one object.
| Class | Part |
|---|---|
.button-group | The container |
.button-group-text | A non-interactive label sharing the group’s shape |
.button-group-separator | A divider between segments |
| Attribute | Meaning |
|---|---|
data-orientation="vertical" | Stacks the controls instead of placing them in a row |
Vertical
Section titled “Vertical”<div class="button-group" data-orientation="vertical" role="group" aria-label="Zoom"> <button class="btn btn-outline" type="button">Zoom in</button> <button class="btn btn-outline" type="button">Zoom out</button> <button class="btn btn-outline" type="button">Reset</button></div>With text
Section titled “With text”.button-group-text is for a prefix or suffix that is not a control — a scheme, a unit, a currency.
<div class="button-group"> <span class="button-group-text">https://</span> <input class="input" value="partialkit.dev" aria-label="Domain" /> <button class="btn btn-outline" type="button">Copy</button></div>With a separator
Section titled “With a separator”Use a separator when the segments do different things, rather than being choices of one kind.
<div class="button-group" role="group" aria-label="Document actions"> <button class="btn btn-secondary" type="button">Save</button> <div class="button-group-separator"></div> <button class="btn btn-secondary btn-icon" type="button" aria-label="More options"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="m6 9 6 6 6-6"></path> </svg> </button></div>Set dir="rtl" on the page or on any subtree — padding, corners and positions follow the reading
direction on their own. See the button page for a live example.
Accessibility
Section titled “Accessibility”A group of related controls should say so. Add role="group" and a name:
<div class="button-group" role="group" aria-label="Text alignment">When the buttons are choices rather than actions, they are a radio group, not a button group —
reach for role="radiogroup" with radio inputs so the arrow keys and the announced state come from
the platform.
Focus is never hidden by a neighbour: a focused control lifts above the others so its ring stays whole.