Visuals

To keep in mind

A button group contains buttons that indicate to a user that they can perform actions on an object, such as:

• Apply an action to an object, e.g. save, delete, add an item, undo, create a new item
• Trigger the next step in a process

• Default button groups:
  • Follow button principles.
  • These use extremely closely related actions on a single object.
• Toggle button groups
  • Follow button principles.
  • If using icon buttons, follow icon button principles too.
  • Mutually exclusive settings, such as choosing left, centered, or right aligned text.

When to use

When there’s not enough space for separate buttons or they control the one setting.

When not to use

• Don’t use a button group when there’s space for separate buttons.

External Links

Here are some examples of other existing design systems:

• Material: toggle button
• Lightning: button icons
• Polaris: button group
• Polaris: button