Foundations
Colors
Iconography
Grid + Spacing
Responsive
Shadows
Typography
Layout
Modals
Modals / Confirmation
Panels
Tabs
Actions & Inputs
Buttons
Checkboxs
Dropdowns
Forms
Links
Radio Buttons
Selects
Text Fields
Status & Feedback
Badges
Progress Indicators
Tooltips
The tab component is used to organize and navigate between content types that are related and at the same level of information architecture heirarchy.
◢
Overview
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.
USE CASES:
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.
Anatomy
1. Tab / in-focus
This is the selected state.
2. Tab
This is the unselected state.
3. Divider
The divider separates tabs from page content.
Responsive
Desktop and Tablet
An example of Desktop Tabs.
Mobile
An example of Mobile Tabs.
Notes + Specifications
Notes + Specifications
–————
Size
Height: 40px
Text: Text
Width: Variable
Padding: 16px
–————
Unselected
Color: Grey 70
Selected
Color: Blue 40
Underline: 4px, Blue 40
–————
Divider
Color: Grey 30
Height: 1px
Width: Full Width
