Interactive Example
Rules of Thumb
- Use only one row of Tabs.
- Use higher level Tabs only on top of the panel.
- Tab labels should not be more than two words and should accurately reflect what underlying content the user can expect to reveal.
- Use title-style capitalization for labels.
- High level Tabs are often used to organize an application by work process.
High Level Tabs are often process/workflow oriented. Process oriented Tabs should:
- Appear in the upper left quadrant.
- Be clearly labeled.
- Guide users through a sequential process.
Interior/Compact Tabs
For use outside of main navigation, a more compact Tab component can be used.
Rules of Thumb
- Use only one row of Tabs.
- Tab labels should not be more than two words and should accurately reflect what the user can expect to see.
- Use sentence case capitalization for labels.
Examples
Asset Status
| Asset | Version | Status |
|---|---|---|
| Documentation | N/A | Available |
| UI Kit - Dark | v7 | Available |
| UI Kit - Light | v7 | Available |
| UI Kit - Wireframe | v7 | Available |
| Web Component | v7 | Available |
| Component Tokens | N/A | Planned |
Status Key
AvailableIn ProgressPlannedNot AvailableDeprecated