Button Group

A row of connected buttons that share borders. Use for related actions, view toggles, or segmented controls.

Preview

With icons

Sizes

Behaviour

• Buttons are visually joined with no gap. Interior buttons have zero border-radius.
• The first button keeps the left radius, the last button keeps the right radius.
• Overlapping borders are collapsed with margin-left: -1px.
• The active button receives the primary fill to indicate the current selection.

Props

Prop	Type	Default	Description
children	ReactNode	--	Button elements
size	'sm' | 'md' | 'lg'	'md'	Uniform size for all buttons
className	string	--	Additional CSS classes

Each child button accepts standard Button props. Add active to highlight the selected button.

Code example

React

import { ButtonGroup, Button } from '@thepace/lexicon/components';

<ButtonGroup>
  <Button variant="secondary" active>Day</Button>
  <Button variant="secondary">Week</Button>
  <Button variant="secondary">Month</Button>
</ButtonGroup>

Vanilla HTML

<div class="lex-button-group">
  <button class="lex-button lex-button--secondary lex-button--md lex-button--active">
    Day
  </button>
  <button class="lex-button lex-button--secondary lex-button--md">
    Week
  </button>
  <button class="lex-button lex-button--secondary lex-button--md">
    Month
  </button>
</div>

CSS class reference

Class	Purpose
.lex-button-group	Container — joins child buttons
.lex-button--active	Highlights the selected button with primary fill

Child buttons use standard .lex-button classes. The group container handles radius and border collapse.

Accessibility

• Wrap in a role="group" with an aria-label describing the control (e.g. "View mode").
• Use aria-pressed="true" on the active button for toggle groups.
• Keyboard: Tab moves focus into the group, arrow keys navigate between buttons.

Guidelines

Do

• Use for mutually exclusive options (view toggles, time ranges, segmented controls).
• Keep groups to 2–5 buttons for scannability.
• Use consistent button sizes within a group.

Don't

• Don't mix different variants within the same group.
• Don't use for unrelated actions — use separate buttons with spacing instead.