ButtonGroup

View on Github

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

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)

Name

Type

Default

children
required
ReactElement<any, string | JSXElementConstructor<any>> | 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.

testId
string

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

variant
"spaced"
"merged"
"collapsed"

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

withDivider
false
true

Determines if the divider should be rendered between merged buttons