Component checklist

Preview

When facing a radio-style button group, users can select only one button. It’s usually located at the top of the page or panel and serves to switch visualizations.

Variations

There are several variations of button groups. To choose the right one, consider the context of the situation.

1. Text only
   Default variation of the button.
2. Left icon
   Place an icon on the left side of the button to support the options visually.
3. Icon-only
   Use an icon-only button (without text) for actions that are clearly stated by the icon, especially when there’s not enough space for a text button. In most cases, you will need to complement an icon-only button with a brief tooltip explaining the button's action.

Justifying button groups

By default, each button in the group can keep its original size depending on the label and/or icon size.

When you need to justify the buttons in a group, we suggest using the width of the widest button in the group or taking the width of the available space and dividing it equally between the buttons in the group.