ButtonGroup

molecules

Segmented button cluster. Visually connected buttons for related actions.

ARIA Role: group

Demo

Props

PropTypeRequiredDefaultDescription
buttonsButtonConfig[]Yes—Button configurations
variant'default' | 'outline'No'default'Button variant
size'sm' | 'md' | 'lg'No'md'Button size
fullWidthbooleanNofalseStretch to full width

TypeScript Interface

interface ButtonGroupProps {
  buttons: ButtonConfig[];
  variant?: 'default' | 'outline';
  size?: 'sm' | 'md' | 'lg';
  fullWidth?: boolean;
}

Assertions (NASA Rule 5)

  • [aria]Container must have role='group' with aria-label(WAI-ARIA APG)
  • [keyboard]Arrow keys must navigate between buttons(WCAG 2.1.1)
  • [type]selectionMode: 'single' or 'multiple' required(NASA Rule 5)

Usage

Import

import { Buttongroup } from '@epasslive/design-system'

Basic

<Buttongroup />

With Variants

<Buttongroup variant="primary" size="md" />