ButtonGroup

Import

import { ButtonGroup } from '@contentful/f36-components';
// or
import { ButtonGroup } from '@contentful/f36-button';

Examples

Merged

One of the common use cases is to merge primary button with a secondary button or with a button that opens a dropdown with secondary actions.

Also, it is possible to add a divider for buttons that don't have borders (primary, positive, and negative variants).

Hide code
function ButtonGroupMergedExample() {
  return (
    <Stack flexDirection="column">
      <ButtonGroup>
        <Button variant="secondary" size="small">
          Save
        </Button>
        <IconButton
          variant="secondary"
          size="small"
          aria-label="Add more"
          icon={<PlusIcon />}
        />
      </ButtonGroup>
      <ButtonGroup withDivider>
        <Button variant="positive">Publish changes</Button>
        <IconButton
          variant="positive"
          aria-label="Open dropdown"
          icon={<ChevronDownIcon />}
        />
      </ButtonGroup>
    </Stack>
  );
}
function ButtonGroupMergedExample() {
  return (
    <Stack flexDirection="column">
      <ButtonGroup>
        <Button variant="secondary" size="small">
          Save
        </Button>
        <IconButton
          variant="secondary"
          size="small"
          aria-label="Add more"
          icon={<PlusIcon />}
        />
      </ButtonGroup>
      <ButtonGroup withDivider>
        <Button variant="positive">Publish changes</Button>
        <IconButton
          variant="positive"
          aria-label="Open dropdown"
          icon={<ChevronDownIcon />}
        />
      </ButtonGroup>
    </Stack>
  );
}
Open in Playground

Spaced

Instead of merging buttons all together you can use variant="spaced" to make them spaced and control an empty space with spacing property.

Hide code
function ButtonGroupSpacedExample() {
  return (
    <ButtonGroup variant="spaced" spacing="spacingM">
      <Button variant="secondary" size="small">
        Duplicate
      </Button>
      <Button variant="secondary" size="small">
        Unpublish
      </Button>
      <Button variant="positive" size="small">
        Publish
      </Button>
      <Button variant="secondary" size="small">
        Add to release
      </Button>
    </ButtonGroup>
  );
}
function ButtonGroupSpacedExample() {
  return (
    <ButtonGroup variant="spaced" spacing="spacingM">
      <Button variant="secondary" size="small">
        Duplicate
      </Button>
      <Button variant="secondary" size="small">
        Unpublish
      </Button>
      <Button variant="positive" size="small">
        Publish
      </Button>
      <Button variant="secondary" size="small">
        Add to release
      </Button>
    </ButtonGroup>
  );
}
Open in Playground

Accessibility

If using a button that won't have text be sure to provide an aria-label property.