Design
Component checklist
Up to date
React
Up to date
Overview
Segment control displays a horizontal set of segmented buttons. The usage of segment control should be clearly defined so that users can easily identify each segmented buttons. Explanation tooltip, help icon, select trigger or any other interactions are not allowed.
Visual documentation
Anatomy
- Segmented control button
- Leading icon (optional)
- Label text (optional)
- Divider
Composition
- Not justified - By default, each segmented control button keeps its original size based on the label and/or icon.
- Justified - When you need to justify segmented control buttons, use either the width of the widest button or take the width of the available space and divide it equally between the segmented control buttons.
Variants
There are several variations of segment control. To choose the right one, consider the context of the situation.
- Text only - Displays only a text label.
- Leading icon - Displays a descriptive icon before the text label to visually support the segmented control button.
- Icon-only - Displays only an icon, suitable for actions clearly represented by the icon, especially when space is limited. Always complement an icon-only segment control with a brief tooltip explaining the segment's action.
Usage guidelines
When to use
- For a more visually attractive choice between two to five options
- When you want to allow users to choose one option
- To switch between different view formats (e.g. List view, Content view)
- When changing the visual style of data presentations (e.g. Bar chart, Column chart, Pie chart)
- To filter content (e.g. Daily, Weekly, Monthly, Yearly)
When not to use
- When switching between different sections, use tab instead
- For more than five options, use radio button, or select instead
- When multiple options need to be selected at the same time, use checkbox instead
- Do not use segment control for activating or deactivating items, use toggle instead
Tab vs Segmented control
|
Use cases |
Tab |
Segmented control |
|---|---|---|
|
Navigation between different sections. |
✅ Use |
❌ Don’t use |
|
Switch to a different section of the application, which will have its own content. |
✅ Use |
❌ Don’t use |
|
Switch between views or filter within the same section. |
❌ Don’t use |
✅ Use |
Content Guidelines
Make sure your text labels are short, clear and always written in the same format. Use text labels that are either all nouns (e.g. Desktop, Mobile, Tablet) or all adjectives (e.g. Daily, Weekly, Monthly, Yearly).
Don't write unnecessary long texts that need to be shortened with ellipsis (...).
Technical documentation
Interaction & behavior
Keyboard & Mouse Interactions
- Press Tab to focus on the first segmented control button.
- Press Tab again to continue navigating through the other segmented control buttons.
- Pressing Space or Enter to select the focused segmented control button. If the active segmented control button is in focus, pressing Space or Enter will not deselect it.
- Clicking the segmented control button selects it and updates the selected state. If the selected segmented control button is clicked again, it doesn't deselect.
Accessibility
- Segmented control provides sufficient color contrast between states (Enabled, Hover, Active, Selected) to meet WCAG 2.2 AA standards requirements.
- Keyboard navigation is fully supported, with clear focus indicators.
Related components
- Radio button - Radio buttons allow users to select a single option from mutually exclusive choices.
- Select - Select is used to choose one or more options from a list.
- Tab - Tabs are used to organize content by allowing the user to switch views.