ButtonGroup

When to use

ButtonGroup is for buttons that make sense together: previous and next page, an action with its options menu, the footer actions of a dialog.

When not to use

• When one option stays pressed: Use ToggleGroup; it adds arrow keys and the pressed state.
• For independent actions: Lay the buttons out with Inline; no group name is needed.
• For navigation between pages: Build links with Link.

Anatomy

LightDark

Copy code

import { ButtonGroup, IconButton } from '@bigbang/ui';

export default function Attached() {
  return (
    <ButtonGroup attached label="Pages">
      <IconButton variant="secondary" icon="chevron-left" label="Previous" />
      <IconButton variant="secondary" icon="chevron-right" label="Next" />
    </ButtonGroup>
  );
}

1. Container: a <div> with role="group"; with label it is named through aria-label.
2. Buttons: Button or IconButton items of one size.
3. Shared border: with attached, inner corners turn square and borders overlap by 1 px.

Behaviour

• Each button is its own tab stop; arrow keys are not used.
• In an attached group the focused button comes to the front (z-index: 1); its focus ring is not hidden under its neighbour.
• Corners use logical sides (rounded-s, rounded-e); in right-to-left text the joint is mirrored.
• ButtonGroup has no motion of its own; each button keeps the Button press motion.

Guidelines

• Use one size in a group; use secondary buttons in an attached group.
• Keep at most one primary button in a group, and put it last.
• Give a label only when the buttons make sense together: “Pages”.
• If an attached group has more than three buttons, consider moving them to a menu.

Content

• label is a noun phrase that names the topic of the group, not a verb.
• Keep the button texts in the same grammatical form: “Previous”, “Next”.

Turkish	English
Sayfalar	Pages
Önceki	Previous
Sonraki	Next

Related components

• Button: the items of the group.
• IconButton: icon-only items.
• ToggleGroup: options that stay pressed.
• Inline: lays out independent items side by side.