| Status | ||||
|---|---|---|---|---|
|
...
General guidelines
Structure
The horizontal layout of the tab bar never changes. The tabs always appear side by side
There's always one tab selected at a time
...
Later on, you can show the tab last selected by the user.
States
zRegularRegular |  |
Hover |  |
Active |  |
Selected |  |
Not selected focused |  |
Not selected focused hover |  |
Not selected focused active |  |
Selected focused |  |
...
You can click on the entire label
Tabs can be switched by clicking on a different tab
Only 1 content can be viewed at a time when clicking on another tab the display will change for the selected tab
When the label is truncated, hovering over it will show a tooltip with the full label
Validations and errors
Tab item error |  |  |
Tab item warning |  |  |
Best practices
Keep in mind that at mobile widths and during translation, the character length of a label will impact the experience. Do not use icons in the tab label
A maximum of six tabs is recommended. This is to maintain an uncluttered UI and reduce cognitive load for users.
In the details pane, a maximum of four tabs is recommended.
Use clear and short labels
Tab order should be consistent across an experience. Tabs with related content should be grouped adjacent to each other.
...