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.