Tabs should contain content that is related and of the same level of hierarchy.
Tabs should not be used to filter content.
Tabs should not be used to navigate to different views or pages.
Tabs should not be “user generated”.
Primary Actions (blue buttons) are reserved for Page Level actions.
Use Secondary Actions (white buttons) within Tabs.
Store Settings: Allows a large amount of content to be organized and presented in relevant groupings.
Store Performance: Allows user to switch view between day, week, month.
Store Design: Widget Settings display different content on the same level of heirachy.
1. Tab / in-focus
This is the selected state.
This is the unselected state.
The divider separates tabs from page content.
Desktop and Tablet
An example of Desktop Tabs.
An example of Mobile Tabs.