| Status | ||||
|---|---|---|---|---|
|
...
Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects.
 |
Types
...
Type
...
Usage
...
Main tabs | Use it as tabbed navigation - Single row above their associated content | |
2nd level tabs | Single row above their associated content. Appear only as a second level to main tabs hierarchy |  |
Details pane tabs | Single row above their associated content. Appear only in the details pane |  |
Ribbon tabs | Use it as tabbed navigation in the ribbon only |  |
...
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
zRegular | Image | Regular |  |
|---|---|---|---|
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
...
State
...
Image
...
Tab item error |  |  |
Tab item warning |  |  |
...