Examples
Use for most cases, especially when the number of tabs may be more than three.
Use to alternate among related views within the same context.
Use for most cases, especially when the number of tabs may be more than three.
Use for most cases, especially when the number of tabs may be more than three.
Use when tabs contain a few (2 or 3) items within a narrow column.
Use to inform a piece of information about the tabs.
Use to provide information about the popover contents
Use for most cases, especially when the number of tabs may be more than three.
Use when tabs contain a few (2 or 3) items within a narrow column.
Also known as Segmented controls on iOS.
Use to inform a piece of information about the tabs.
Use to provide information about the popover contents
Tabs should:
Tabs should:
Be clearly labeled to help differentiate the different sections beneath them.
Have short and scannable labels, generally kept to single word.
Relate to the section of Shopify they’re on. Imagine the page section title is an invisible noun after the tab. For example, the tabs for the orders section are:
The tabs for the gift cards section are:
And for the customers section, the tabs are:
Where possible, follow this pattern when writing tabs.