ButtonGroup

The ButtonGroup is used to group buttons together, ensuring they are visually consistent and aligned according to design specifications.

Effective Practices

When using the ButtonGroup component, consider the following best practices:

• Consistency: Use consistent language and tense for button text across buttons in the button group.
• Accessibility: Associate buttons with forms, when applicable.
• Visual Hierarchy: Use a single primary or critical button to create a visual hierarchy through differing colours across buttons within the button group. Use the ButtonGroupItem component to create a visual hierarchy through differing widths within the button group.

Usage Guidelines

Basic Usage

DeleteCancel

<ButtonGroup>
  <Button variant="critical">Delete</Button>
  <Button>Cancel</Button>
</Button>

Props

ButtonGroup Props

interface ButtonGroupProps

children ReactNode

The button components to group together.

ButtonGroupItem Props

interface ButtonGroupItemProps

children ReactElement string | JSXElementConstructor>

A single button component within the group.

expand ? boolean

Whether the button component should be expanded or shrunk to exact fit.

Defaults to true