Updated: September 20, 2016

Button: Segmented Button

Intro

A segmented button shows a group of options. When the user clicks on one of the options, it stays in a pressed state. The segmented button is similar to a radio button group control.

Do

  • Use either icons or text for all options.
  • When using text in button, use as short a text as possible, preferably a single word. Use self-explanatory text that clearly describes the action that the button performs, preferably in verb form, and explain it in more details in a tooltip.
  • When using an icon, provide a tooltip with meaningful text and make sure that the default accessibility text for that icon is correct for your use case. If not, define app-specific text for accessibility.
  • Sort options alphabetically, numerically, or logically to help users find the right option quickly.

Don’t

  • Don’t combine an icon and text into one button.
  • If an option is inactive and the user can do nothing on the same screen to make it active, then don’t show that option.
  • When using text in button, don’t repeat the button name in the tooltip.