v1.1.8

Button Group

A set of buttons grouped together as a single visual unit.

Default

Buttons joined horizontally with shared borders.

html 
<div class="uc-btn-group">
  <button>Left</button>
  <button>Center</button>
  <button>Right</button>
</div>

With Active State

One button highlighted as the current selection.

html 
<div class="uc-btn-group">
  <button class="uc-active">Day</button>
  <button>Week</button>
  <button>Month</button>
  <button>Year</button>
</div>

With Icons

Icon-only button group for compact toolbars.

html 
<div class="uc-btn-group">
  <button><svg>...</svg></button>
  <button><svg>...</svg></button>
  <button><svg>...</svg></button>
</div>

Sizes

Small, default, and large button group sizes.

html 
<!-- Small -->
<div class="uc-btn-group uc-btn-group-sm">
  <button>Small</button>
  <button>Group</button>
</div>

<!-- Default -->
<div class="uc-btn-group">
  <button>Default</button>
  <button>Group</button>
</div>

<!-- Large -->
<div class="uc-btn-group uc-btn-group-lg">
  <button>Large</button>
  <button>Group</button>
</div>

With Dropdown

Split button with a primary action and a dropdown trigger.

html 
<!-- Primary split -->
<div class="uc-btn-group-inverted">
  <button class="uc-bg-accents-blue uc-text-constant-white">Save</button>
  <button class="uc-bg-accents-blue uc-text-constant-white"><svg>...</svg></button>
</div>

<!-- Bordered split -->
<div class="uc-btn-group">
  <button>Export</button>
  <button><svg>...</svg></button>
</div>

Vertical

Buttons stacked vertically for sidebar or panel layouts.

html 
<div class="uc-btn-group-vertical">
  <button class="uc-active"><svg>...</svg> Overview</button>
  <button><svg>...</svg> Analytics</button>
  <button><svg>...</svg> Settings</button>
</div>

API Reference

All CSS classes available for the Button Group component.

Class Type Description
uc-btn-group Base Horizontal button group — auto-styles child buttons
uc-btn-group-inverted Base Button group without outer border — for colored split buttons
uc-btn-group-vertical Base Vertical button group — auto-styles child buttons
uc-btn-group-sm Size Small size modifier — smaller height and padding
uc-btn-group-lg Size Large size modifier — taller height and wider padding
uc-active State Active/selected button highlighting

Accessibility

Keyboard and screen reader support.

Feature Details
Role Use role="group" with aria-label describing the group purpose
Keyboard Tab moves between groups, arrow keys move within the group
Focus Visible focus ring on each button via :focus-visible
Toggle Active button should have aria-pressed="true" for toggle groups
Built with:
Button