Components

ButtonGroup

Gathers related buttons into one row or column, spaced or joined.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

ButtonGroup lays the buttons side by side with a space-sm (6 px) gap and sets role="group".

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

export default function Default() {
  return (
    <ButtonGroup>
      <Button variant="secondary">Secondary button</Button>
      <Button>Primary button</Button>
    </ButtonGroup>
  );
}

Attached

attached joins the buttons into one control with shared borders. Inner corners turn square; each button overlaps the previous one’s border by 1 px.

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>
  );
}

Split action

When a Button and an IconButton are joined, the main action and its more-actions menu read as one control.

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

export default function Split() {
  return (
    <ButtonGroup attached>
      <Button variant="secondary">Secondary button</Button>
      <IconButton variant="secondary" icon="ellipsis" label="More actions" />
    </ButtonGroup>
  );
}

Vertical

orientation="vertical" stacks the buttons and makes them the same width.

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

export default function Vertical() {
  return (
    <ButtonGroup orientation="vertical" attached label="Pages">
      <Button variant="secondary">Previous</Button>
      <Button variant="secondary">Next</Button>
    </ButtonGroup>
  );
}

Light and dark mode

ButtonGroup adds no colour; the buttons use their own tokens.

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>
  );
}