Button Group

A button group enables the user to perform an action with a single click.

General guidelines

Use button group as an element of secondary navigation within a page. 

It behaves like a group of exclusive buttons allowing you to display different views (e.g.: a visual/a table or a specific set/element).

 

Best practices

  • Limit the number of segmented controls from 3 to 5 buttons maximum.
  • Buttons are exclusively enabled: enabling one, disables the others.
  • Always use brief labels (two words maximum) and uniform ones in terms of form and content.
  • It is possible to place an icon before the label, the only condition being to maintain uniformity among the labels of a group of buttons.
ButtonGroup01

For a list of settings embedded into another component, we recommend you to use the Button Icon along with separators to identify the related groups.

ButtonGroup02@2x
Visual guidelines

Behaviours

Each type of button has 4 states: default, hover, focus and disable.

Always use the disable state when the button is not clickable.

White versions are available when the buttons are used on dark backgrounds or images and the necessary contrast for readability is lacking.

ButtonGroup03

Sizes

Several sizes are available, use them wisely depending on the action priority and your targeted device size.

Big sizes like L & M will better suit mobile devices usage but can be used on desktop landing pages as well.

ButtonGroup04
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top