Button group
Join adjacent buttons into a single segmented unit, horizontal or vertical.
Wrap two or more .buttons in .button-group to fuse them into one segmented
control. The group squares off the inner corners and collapses the shared border so
the buttons read as a unit, while each button keeps its own data-variant and
data-size. Add role="group" and an aria-label so assistive tech announces the
set.
Horizontal
The default orientation lays buttons out in a row.
<div class="flex flex-col items-start gap-md"> <div class="button-group" role="group" aria-label="Text alignment"> <button class="button" type="button">Left</button> <button class="button" type="button">Center</button> <button class="button" type="button">Right</button> </div> <div class="button-group" role="group" aria-label="Pagination"> <button class="button" data-variant="muted" type="button">Previous</button> <button class="button" data-variant="muted" type="button">1</button> <button class="button" data-variant="muted" type="button">2</button> <button class="button" data-variant="muted" type="button">3</button> <button class="button" data-variant="muted" type="button">Next</button> </div> <div class="button-group" role="group" aria-label="Formatting"> <button class="button" data-size="icon" type="button" aria-label="Bold"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" > <path d="M6 4h8a4 4 0 0 1 0 8H6z" /> <path d="M6 12h9a4 4 0 0 1 0 8H6z" /> </svg> </button> <button class="button" data-size="icon" type="button" aria-label="Italic"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" > <line x1="19" y1="4" x2="10" y2="4" /> <line x1="14" y1="20" x2="5" y2="20" /> <line x1="15" y1="4" x2="9" y2="20" /> </svg> </button> <button class="button" data-size="icon" type="button" aria-label="Underline"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" > <path d="M6 4v6a6 6 0 0 0 12 0V4" /> <line x1="4" y1="20" x2="20" y2="20" /> </svg> </button> </div></div>Vertical
Set data-orientation="vertical" on the wrapper to stack them.
<div class="button-group" data-orientation="vertical" role="group" aria-label="View options"> <button class="button" type="button">List</button> <button class="button" type="button">Board</button> <button class="button" type="button">Calendar</button> <button class="button" type="button">Timeline</button></div>API
| Attribute | Values |
|---|---|
data-orientation | vertical (omit = horizontal default) |
The group reads each child's own --button-radius, so the outer corners follow the
buttons' data-size automatically — only the inner corners are squared. Need a
divider between segments? Drop your own separator element in as a child; it inherits
the same border collapse. You never need to touch zazz/styles/.