Empty States
An empty state occurs when an element has no content to display. Depending on the context, it tells the user what is missing, why it is missing, and can offer guidance on next steps or alternative actions.
Section titled “ Design”Variants
Section titled “Variants”
In Practice
Section titled “ In Practice”- Display empty states in the space where the content would otherwise be shown.
- Can apply to full pages, page sections, cards, dashboards, tables, and side panels.
- Empty states can include:
- Image
- Title
- Description
- Buttons
- Links
- The size of the image is relative to the size of the container.
- If the container is very small, limit the empty state to text only.
When to use
Section titled “When to use”Empty states can be caused by a variety of reasons. Some include:
- No data existing due to first time use of a feature.
- Access issues dues to permissions or other system configurations.
- User actions like search or filtering that returns no results, or the successful completion of a workflow.
Content guidelines
Section titled “ Content guidelines”Empty states should be helpful and engaging for the user.
- Clearly explain the reason for the empty state.
- Use positive or neutral language.
Description
Section titled “Description”- Let the user know what action, if any, they can take.
- Add further explanation for the empty state if necessary.
Button and links
Section titled “Button and links”- Labels should match the action described in the description.
Accessibility
Section titled “ Accessibility”- Images used on empty states do not need to be recognized by screen readers and other assistive technologies.
- For more information, see our accessibility guidelines.
Design resources
Section titled “ Design resources”Illustrations can be downloaded in our image resources.
View component in Figma