Button toggles are a compact set of options from which a single selection can be made.

Button toggles have the appearance of a buttons and behave as a radio group. Selecting any button in the group automatically deselects another selected button in the same group.

  1. Container
  2. Toggle button (selected)
  3. Toggle button (unselected)
  4. Text label

Button toggles change their order based on LTR or RTL contexts.

Button toggle size is based on an integral number of nudges, where 1 nudge is 8px (img).

  1. Small – Based on a height of 3 nudges (24 px)
  2. Medium – Based on a height of 4 nudges (32 px)

Button toggles are interactive components that provide visual feedback when the pointer hovers over them.

A button toggle group can only have one selected toggle button. When a toggle button is selected, all other toggle buttons in the group become unselected.

In the following example, the "Two" button in the button toggle group is selected, and the user is about to select the "Three" button (A).

After selecting the "Three" button (B), it is displayed in the selected state and the previously selected button, the "Two" button, is now displayed in the unselected state.

The primary action area of a button toggle is the button surface. Press a button to select it. If a button toggle group is in the disabled state, no action will take place.

Our button toggles have been designed to comply with the WCAG 2.1 AA accessibility guidelines. For more information about how our components comply with color-related accessibility guidelines, see Foundations > Colors > Accessibility.

For more information about button toggles, see:

Related components: