Skip to main content

Tabs

Tabs in Astro applications are used to divide major areas of content and to indicate work process.

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
Do: To guide users through a process, correctly place and label Tabs to reflect a step-by-step process.
Do: To guide users through a process, correctly place and label Tabs to reflect a step-by-step process.
Don’t: Stack or improperly nest Tabs.
Don’t: Stack or improperly nest Tabs.

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
Available In Progress Planned Not Available Deprecated
Feedback

Help us improve Astro

Please rate your present experience with Astro:

Cancel