To help users choose from a number of options, we can present a segmented button. It’s a horizontal control made of multiple segments. Users select one of the segments to see the related content and tasks organized there.
Use segmented buttons to allow users to select from a group of mutually exclusive options. The entire control is broken into segments, and each one can be toggled on or off. The first button in the group is always selected and represents the default option. Users can select only one button at a time.
Unselected / selected
- Height: 32 px
- Border radius: 3 px
- Padding: 20 px
- Hover background color: #F4F5F8
- Text, selected: Demi, #393A3D
- Text, not selected: Medium, #6B6C72
Horizontal tabs with icons
Active and Hover / Default
- 32 px height
- Border radius 3 px
- 14 px text
Content guidelines for segmented buttons
- Use sentence case. It’s OK to use title case for proper nouns (Brad Smith), branded products (QuickBooks ProAdvisor), and official things like Board of Equalization.
- Don’t use punctuation.
- Start with an action verb.
- Keep it short. Two words is optimal (verb + noun = Create project / Start now / Send email).
- Describe what actually happens when people use the button. Avoid Next or Continue when a more specific word will do (Send, Start, Sign up). Never say Submit.
- Never write “click here.” If instruction text is needed, use the verb “select.”