ButtonGroup

Group related actions.

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

Spaced

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

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
boolean | ReactElement<any, string | JSXElementConstructor<any>> | (boolean | ReactElement<any, string | JSXElementConstructor<any>>)[]

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"
"collapsed"

Determines how the Button Group will display the buttons

withDivider
false
true

Determines if the divider should be rendered between merged buttons

false