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

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={<CaretDownIcon />}
        />
      </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.

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.

Props (API reference)

Open in Storybook

Name	Type	Default
children required	ReactNode
className	string CSS class to be appended to the root element
spacing	"spacing2Xs" "spacingXs" "spacingS" "spacingM" "spacingL" "spacingXl" "spacing2Xl" "spacing3Xl" "spacing4Xl" Sets the spacing of the buttons if variant is separate.	spacingS
testId	string A [data-test-id] attribute used for testing purposes
variant	"spaced" "merged" Determines how the Button Group will display the buttons
withDivider	false true Determines if the divider should be rendered between merged buttons	false

Import

Examples

Merged

Spaced

Accessibility

Props (API reference)

Name

Type

Default

Help improve this page