ButtonGroup

ButtonGroup should be used to group buttons whose actions are related, with an option to merge them together or split them with an equal amount of free space.

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).

Open in Playground
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>
  );
}
Hide source

Spaced

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

Open in Playground
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>
  );
}
Hide source

Accessibility

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

Props (API reference)

• Name

  children(required)

  ReactElement<any, string | JSXElementConstructor<any>> | ReactElement<any, string | JSXElementConstructor<any>>[]
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  spacing

  Description

  Sets the spacing of the buttons if variant is separate.

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string
• Name

  variant

  Description

  Determines how the Button Group will display the buttons Determines how the Button Group will display the buttons Determines how the Button Group will display the buttons

  "spaced"

  "merged"

  "collapsed"
• Name

  withDivider

  Description

  Determines if the divider should be rendered between merged buttons

  false

  true