Use tabs to allow the user to switch between sections of related content.
Tabs can either be left aligned or fill the width of their container.
Tabs can display optional icons.
1. Left aligned with icons
2. Full width without icons
Usage
Show adjacent pieces of content with an obvious relationship, e.g. "Electric | Gas"
Tabs should not be used to compare content as only one panel can be viewed at a time
Aim for 2–5 tabs. If you exceed this, consider segmented controls or secondary navigation.
Writing tabs
Defining your tabs
Tab content should be related content that is separated into, at most, a few sections. Ideally, no more than 3-4 tabs should be used.
Tabs should be checked on a small device to ensure content can comfortably fit.
Choosing titles
Consider the goal of the tab and pick one noun to describe the topic. For tone of voice, dial up our straight-talking and inclusive traits. Read our tone of voice guidelines for details.
- Use concrete nouns
- Be concise
- Tell it like it is – the majority of primary tabs should be nouns
- Represent what the user will find in their tabs
- Use tabs to separate related or like topics
- Don’t be elaborate, as tabs should be purely directional
- Don’t use more than two words in the tab title
- Don’t use ambiguous labels
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v1.0 |
|
Web (@ovotech/element) |
v1.0 |
|
@ovotech/element-native) |
v1.0 |
Related components