Tabs

Skeleton tabs are used to provide a low fidelity representation of content before it appears on the page, and improves load times perceived by merchants. Can be used for content in or outside of a card.

Props

No props found for this component, run `yarn gen:docs` to generate component meta first.

Slots

No slots found for this component, run `yarn gen:docs` to generate component meta first.

Events

Tabs events

Best practices

Tabs should:

• Represent the same kind of content, such as a list-view with different filters applied. Don’t use tabs to group content that is dissimilar.
• Only be active one at a time.
• Not force merchants to jump back and forth to do a single task. Merchants should be able to complete their work and find what they need under each tab.
• Not be used for primary navigation.

---

Content guidelines

Tabs

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:

  • All
  • Open
  • Unfulfilled
  • Unpaid

The tabs for the gift cards section are:

• All
• New
• Partially used
• Used
• Disabled

And for the customers section, the tabs are:

• All
• New
• Returning
• Abandoned checkouts
• Email subscribers

Where possible, follow this pattern when writing tabs.