Toggle buttons may be used to group related options. Arrange layout and spacing to convey that certain toggle buttons are part of a group.

Focus and pressed states may reinforce that toggles are part of a group. For example, when one button segment is focused, focus may be displayed simultaneously on the rest of the segment.

Toggle button requirements:

  • Have at least three toggle buttons in a group
  • Label buttons with text, an icon, or both

The following combinations are recommended:

  • Multiple and unselected
  • Exclusive and unselected
  • Exclusive only
format_align_left format_align_center format_align_right format_align_justify

Exclusive selection

Text justification toggle buttons present options for left, right, center, full, and justified text with only one item available for selection at a time. Selecting one option deselects any other.

format_align_left format_align_center format_align_right format_align_justify

No options are selected

format_bold format_italic format_underlined format_color_fill arrow_drop_down

Multiple selection

Logically-grouped options, like Bold, Italic, and Underline, allow multiple options to be selected.

format_bold format_italic format_underlined format_color_fillarrow_drop_down

One option is selected

Icon toggles


Icons are appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item.

They are best located in app bars, toolbars, action buttons or toggles.

Icon toggles may display bounded or unbounded ink surface reaction ripples beyond their touch-target bounds.

Toggles

wifi wifi wifi wifi wifi

Icon toggles in normal, hover, focused, pressed, and inactive states

icon

favorite

The icon toggle focus indicator color and opacity are related to the color of the icon.