Button Group

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

Default

Buttons joined horizontally with shared borders.

html 
<div class="uc-inline-flex uc-rounded-lg uc-border uc-border-border-strong uc-overflow-hidden">
  <button class="uc-h-10 uc-px-4 uc-bg-neutrals-surface">Left</button>
  <div class="uc-w-[0.5px] uc-bg-border-default"></div>
  <button class="uc-h-10 uc-px-4 uc-bg-neutrals-surface">Center</button>
  <div class="uc-w-[0.5px] uc-bg-border-default"></div>
  <button class="uc-h-10 uc-px-4 uc-bg-neutrals-surface">Right</button>
</div>

With Active State

One button highlighted as the current selection.

html 
<div class="uc-inline-flex uc-rounded-lg uc-border uc-border-border-strong uc-overflow-hidden">
  <button class="uc-h-10 uc-px-4 uc-bg-accents-blue uc-text-constant-white">Day</button>
  <div class="uc-w-[0.5px] uc-bg-border-default"></div>
  <button class="uc-h-10 uc-px-4 uc-bg-neutrals-surface">Week</button>
  <div class="uc-w-[0.5px] uc-bg-border-default"></div>
  <button class="uc-h-10 uc-px-4 uc-bg-neutrals-surface">Month</button>
  <div class="uc-w-[0.5px] uc-bg-border-default"></div>
  <button class="uc-h-10 uc-px-4 uc-bg-neutrals-surface">Year</button>
</div>

With Icons

Icon-only button group for compact toolbars.

html 
<div class="uc-inline-flex uc-rounded-lg uc-border uc-border-border-strong uc-overflow-hidden">
  <button class="uc-h-10 uc-w-10 uc-bg-neutrals-surface">
    <svg>...</svg>
  </button>
  <div class="uc-w-[0.5px] uc-bg-border-default"></div>
  <button class="uc-h-10 uc-w-10 uc-bg-neutrals-surface">
    <svg>...</svg>
  </button>
  <div class="uc-w-[0.5px] uc-bg-border-default"></div>
  <button class="uc-h-10 uc-w-10 uc-bg-neutrals-surface">
    <svg>...</svg>
  </button>
</div>

Sizes

Small, default, and large button group sizes.

html 
<!-- Small -->
<div class="uc-inline-flex uc-rounded-lg uc-border uc-border-border-strong uc-overflow-hidden">
  <button class="uc-h-8 uc-px-3 uc-text-xs">Small</button>
  <div class="uc-w-[0.5px] uc-bg-border-default"></div>
  <button class="uc-h-8 uc-px-3 uc-text-xs">Group</button>
  ...
</div>

<!-- Default -->
<div class="uc-inline-flex uc-rounded-lg uc-border uc-border-border-strong uc-overflow-hidden">
  <button class="uc-h-10 uc-px-4 uc-text-sm">Default</button>
  <div class="uc-w-[0.5px] uc-bg-border-default"></div>
  <button class="uc-h-10 uc-px-4 uc-text-sm">Group</button>
  ...
</div>

<!-- Large -->
<div class="uc-inline-flex uc-rounded-lg uc-border uc-border-border-strong uc-overflow-hidden">
  <button class="uc-h-12 uc-px-6 uc-text-sm">Large</button>
  <div class="uc-w-[0.5px] uc-bg-border-default"></div>
  <button class="uc-h-12 uc-px-6 uc-text-sm">Group</button>
  ...
</div>

With Dropdown

Split button with a primary action and a dropdown trigger.

html 
<!-- Primary split -->
<div class="uc-inline-flex uc-rounded-lg uc-overflow-hidden">
  <button class="uc-h-10 uc-px-4 uc-bg-accents-blue uc-text-constant-white">Save</button>
  <div class="uc-w-[0.5px] uc-bg-constant-white/20"></div>
  <button class="uc-h-10 uc-w-9 uc-bg-accents-blue uc-text-constant-white">
    <svg>...</svg>
  </button>
</div>

<!-- Bordered split -->
<div class="uc-inline-flex uc-rounded-lg uc-border uc-border-border-strong uc-overflow-hidden">
  <button class="uc-h-10 uc-px-4 uc-bg-neutrals-surface">Export</button>
  <div class="uc-w-[0.5px] uc-bg-border-default"></div>
  <button class="uc-h-10 uc-w-9 uc-bg-neutrals-surface">
    <svg>...</svg>
  </button>
</div>

Vertical

Buttons stacked vertically for sidebar or panel layouts.

html 
<div class="uc-inline-flex uc-flex-col uc-rounded-lg uc-border uc-border-border-strong uc-overflow-hidden">
  <button class="uc-flex uc-items-center uc-gap-2 uc-h-10 uc-px-4 uc-bg-neutrals-subtle">
    <svg>...</svg>
    Overview
  </button>
  <div class="uc-h-[0.5px] uc-bg-border-default"></div>
  <button class="uc-flex uc-items-center uc-gap-2 uc-h-10 uc-px-4 uc-bg-neutrals-surface">
    <svg>...</svg>
    Analytics
  </button>
  <div class="uc-h-[0.5px] uc-bg-border-default"></div>
  <button class="uc-flex uc-items-center uc-gap-2 uc-h-10 uc-px-4 uc-bg-neutrals-surface">
    <svg>...</svg>
    Settings
  </button>
</div>

API Reference

All utility classes available for the Button Group component.

Class Type Description
uc-inline-flex Base Inline flex container for the button group
uc-rounded-lg Base Rounded corners on the group container
uc-border uc-border-border-strong Base Outer border around the entire group
uc-overflow-hidden Base Clips child buttons to group border radius
uc-w-[0.5px] uc-bg-border-default Base Thin vertical divider between horizontal buttons
uc-h-[0.5px] uc-bg-border-default Base Thin horizontal divider between vertical buttons
uc-flex-col Layout Vertical stacking for vertical button groups
uc-h-8 uc-px-3 uc-text-xs Size Small button size within the group
uc-h-10 uc-px-4 uc-text-sm Size Default button size within the group
uc-h-12 uc-px-6 uc-text-sm Size Large button size within the group
uc-bg-accents-blue uc-text-constant-white State Active/selected button highlighting
uc-bg-neutrals-subtle State Subtle background for active state in bordered groups
uc-hover:bg-neutrals-subtle Modifier Hover background for inactive buttons

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