Empty state
Empty states are used when a list, table, or chart has no items or data to show. This is an opportunity to provide explanation or guidance to help merchants progress. The empty state component is intended for use when a full page in the admin is empty, and not for individual elements or areas in the interface.
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.
Best practices
Empty states should:
- Orient merchants by clearly explaining the benefit and utility of a product or feature
- Simplify a complicated experience by focusing on a few key features and benefits
- Use simple and clear language that empowers merchants to move their business forward
- Be encouraging and never make merchants feel unsuccessful or guilty because they haven’t used a product or feature
- Explain the steps merchants need to take to activate a product or feature
- Use illustrations thoughtfully as outlined in our illustration guidelines
- Use only one primary call-to-action button
- Provide extra spacing at the bottom of an empty state that is within content (card, modal, or navigation) to match the image that was passed into the component with a white space above it of 40px
Content guidelines
Title
Empty state titles should:
- Be action-oriented: encourage merchants to take the step required to activate the product or feature
- Follow the content guidelines for headings and subheadings
Subtitle
Empty state subtitles act like body content. They should:
- Describe or explain what’s in the empty state title or item title
- Be conversational: include articles such as the, a, and an
Primary action
Buttons are used for the most important actions you want merchants to take. They should be:
- Clear and predictable: merchants should be able to anticipate what will happen when they click a button. Never deceive merchants by using misleading titles.
- Action-led: buttons should always lead with a strong verb that encourages action. To provide enough context to merchants use the {verb}+{noun} format on buttons except in the case of common actions like Save, Close, Cancel, or OK.
- Scannable: avoid unnecessary words and articles such as the, an, or a.
Secondary action
Secondary actions are used for less important actions such as “Learn more” or “Close” buttons. They should follow all the other content rules outlined for primary buttons.
Related components
- To learn more about illustrations for empty states, read the illustration guidelines
- To create page-level layout, use the layout component
- To highlight a Shopify feature, use the callout card component
Accessibility
Empty state illustrations are implemented as decorative images, so they use an empty alt attribute and are skipped by technologies like screen readers.