Import
import { ButtonGroup } from '@contentful/f36-components';
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={<ChevronDownIcon />}
/>
</ButtonGroup>
</Stack>
);
}
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>
);
}
Accessibility
If using a button that won't have text be sure to provide an aria-label
property.