Name the content of each tab
Tabs match areas with the same context; Different level pages should use navigation.
Tabs Design system
Switch between content areas at the same level.
Checklist contents
Review progress
01
Structure and meaning
Compare information and presentation in context of use.
02
Interaction and usability
Try the operation, change the status and continue working.
03
Complete the experience
Check for details that are easy to miss when putting the design into use.
Progress is saved automatically in this browser.
GUIDANCE
How to review
EXAMPLES
Usage examples
Name the content of each tab
Project details include “Overview”, “Members” and “Activities”.
Variants and use cases
Destination and currently selected tab
Indicate the selected tab by mark or position, keeping the label clear when uncolored.
Change the theme and try tabs with long labels; The check mark still attaches the correct content.
Example Underline the Invoices tab when the invoices panel is displayed.
Your project
There are new updates
Changes saved
Your project
There are new updates
Changes saved
Content loads in tabs
Keep the loading and error state separate for the tab, avoid replacing the content with the old tab's response.
Change tab quickly when initial request is slow; Only the current tab's response is displayed.
Example While viewing History, the late response of Overview does not change the panel.
Your project
There are new updates
Changes saved
Focus, select and are not available
Distinguish focus from selected tab; Unusable tabs need an easy-to-find reason.
Tab and arrow key operations; screen reader reads the selected tab correctly.
Example The focus border can be on Report while Overview is selected.
Your project
There are new updates
Changes saved