Use tabs to allow the user to switch between sections of related content.
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
If you are using more than three tabs, it may be more appropriate to consider an Accordion
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
External links