Component checklist

Preview

When facing a checkbox button, users can select more than one button. Typical usage of this pattern is in filter panel. Do not combine the checkbox button with other components. Use a different component, such as a toggle or checkbox.

Variations

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

1. Text only
   Default variation of the button.
2. Leading 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. In order 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