When no content is present, empty states educate and guide the user. They are usually encountered when users use a feature for the first time and when the primary content area of a page is blank.

Example

Properties

There are no properties for this component.

Usage

Inform users visually

Use empty states to inform users:

• What the new page is for
• Why they should care
• What the next step should be

Use visual imagery to delight, explain, and avoid a wall of text. Ease the user into the flow of things and help them orient themselves. Link to educational content to help them learn more on their own. Don't leave them hanging. Use empty states to avoid confusion and leav

Where and when to use

Empty states should be used when:

• There's no data in a given table or dashboard

Where they're used:

• Sidebar
• Stage

Best Practices