Button Group

A container that groups related buttons together with consistent styling.

Usage

Wrap related buttons or inputs in a <div role="group" class="button-group"> element. Add aria-label or aria-labelledby when the group purpose is not already clear from nearby text.

Use data-orientation="vertical" to stack items vertically. Use <hr role="separator"> to visually divide non-outline buttons. Use button-group-text for static text inside a group.

<div role="group" aria-label="Message actions" class="button-group">
  <button type="button" class="btn-outline">Archive</button>
  <button type="button" class="btn-outline">Report</button>
</div>

Accessibility

  • Use role="group" on the button-group container.
  • Use aria-label or aria-labelledby to label groups whose purpose is not obvious.
  • Keyboard navigation remains native: users tab through each button, input, select, dropdown trigger, or popover trigger.

Button Group vs Toggle Group

  • Use Button Group for related actions, such as archive/report/snooze.
  • Use Toggle Group when each item controls selected/on state.

Examples

Orientation

Use data-orientation="vertical" to stack buttons vertically.

Size

Nested

Separator

Use <hr role="separator"> to visually divide buttons within a group.

Split

Use a separator to create a split action with a primary action and a secondary menu trigger.

Input

Input Group

$
USD

Dropdown Menu

Select

Popover

RTL

Button groups support right-to-left layouts through logical border and radius rules. Add dir="rtl" to the group or an ancestor. Directional icons should be flipped explicitly.