ButtonGroup

Related actions joined in one control: Buttons side by side, divided by Separators except on Brand.

Usage

Import the component and render it.

import { ButtonGroup } from 'src/components/ButtonGroup/ButtonGroup';

<ButtonGroup
  variant="brand"
  size="sm"
  items={[{"label":"Label 1"},{"label":"Label 2"},{"label":"Label 3"}]}
/>

Accessibility

Role: group (role="group"; name it with aria-label).

Key	Action
`Tab`	Moves through the Buttons one by one
`Enter / Space`	Activates the focused Button

Each item is a real Button atom: its states, disabled handling and focus come from the Button.
The Separators are decorative (aria-hidden) so they are not read between the actions.
For a single choice among options use Segmented Control instead; a Button Group only groups actions.

Size

Set the size prop: Small is "sm", Medium is "md".

Small

Medium

<ButtonGroup
  size="sm"
  items={[{"label":"Label 1"},{"label":"Label 2"},{"label":"Label 3"}]}
/>
<ButtonGroup
  size="md"
  items={[{"label":"Label 1"},{"label":"Label 2"},{"label":"Label 3"}]}
/>

Variant

Set the variant prop: Brand is "brand", Subtle is "subtle", Outline is "outline", Ghost is "ghost".

Brand

Subtle

Outline

Ghost

<ButtonGroup
  variant="brand"
  items={[{"label":"Label 1"},{"label":"Label 2"},{"label":"Label 3"}]}
/>
<ButtonGroup
  variant="subtle"
  items={[{"label":"Label 1"},{"label":"Label 2"},{"label":"Label 3"}]}
/>
<ButtonGroup
  variant="outline"
  items={[{"label":"Label 1"},{"label":"Label 2"},{"label":"Label 3"}]}
/>
<ButtonGroup
  variant="ghost"
  items={[{"label":"Label 1"},{"label":"Label 2"},{"label":"Label 3"}]}
/>

Composition

Use the following composition to build a ButtonGroup:

ButtonGroup
├── Button
└── Separator