Checkbox button

Checkbox buttons offer users quick access to actions related to each other and often performed together.

Component checklist

Design

Review required

React

Up to date

Preview

When facing a checkbox button, users can select more than one button. Typical usage of this pattern is in filter panel.

Usage - Preview

 

Variations

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

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

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.

Checkbox button 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