Also known as:
Toggle ButtonsRadio Button GroupsSwitchers

Button Group

Button Groups contain buttons that perform related actions.

AnchorNeed to know

  • Button Groups contain buttons that perform related actions.
  • Default button groups contain connected default buttons that immediately perform actions.
  • Toggle button groups apply mutually exclusive settings.

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 and when not to use

When to use
  • 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.
  • Don’t use a button group when switching between content or object pages. Use tabs instead.

External Links

Here are some examples of other existing design systems: