Button group

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 visually support the options.
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.

 

Sizes

There are several sizes of buttons. To choose the right one, consider the context of the situation.

1. Medium
   Medium size is the default option, use it in most cases.
2. Small
   Use the small button when the interface lacks space or when the button’s action is secondary to the page content.

 

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.