ButtonGroup

Overview

Allows to save space and reduce visual overload when there are multiple actions available for the same entity.

When to use:

  • In Tables as a list of bulk actions available for the selected items.

Implementation

The ButtonGroup component is used for grouping actions like Button. Allows to save space and reduce visual overload when there are multiple actions available for the same entity.

Edit the code below to see your changes live!

<Box style={{ width: 400 }}>
  <ButtonGroup
    actions={[
      { text: 'Button 1' },
      { text: 'Button 2' },
      { text: 'Button 3' },
      { text: 'Button 4' },
      { text: 'Button 5' },
    ]}
  />
</Box>

Props

Prop name
Type
Default
Description
actions *object[]

Accepts an array of objects with Button props and and additional text & icon prop. See example for usage.

localization{ more: string }

Overrides the label with localized text.

Props ending with * are required

Do's and Don'ts

Do
Hide secondary actions or actions that don’t fit the container under ellipsis.
Hide destructive actions under ellipsis.
Keep all the controls in the same outlined style.
Show only actions that are available for the entity.
Don't
Move some controls to the second row.
Stylize some of the actions in the group differently (disabled, primary, destructive, etc.).
Use icons or text + icon for actions(except for ellipsis).