Button group

Button groups offer users quick access to actions related to each other and often performed together.

Component checklist


In development


In development


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.

Usage - Preview



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

Usage - Variants
  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.



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

Usage - Sizes
  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.

Usage - Justify

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.