Empty States

Empty states tell the user there is nothing to show yet — a first-run setup, a cleared queue, a search with no results, or a system state outside their control. Each example below is a starting point: copy it, then adapt the copy, icon or illustration, and actions to your use case. For guidance on when each type applies, see the Empty states pattern.

​

Resources

​

Start Setup

Guide the user to configure a feature that has not been set up yet, with an illustration and a primary action.

​

Headlines

Introduce a feature area with a bold headline, supporting text, and a secondary action.

​

Neutral Feedback

State a neutral, informational empty result. Use when there is nothing to show yet and no action is needed.

​

Neutral Feedback (alt)

The neutral message with a subdued icon for a little more presence.

​

Negative Feedback

Signal a failed or empty search and offer a corrective action inline.

​

Positive Feedback (icon)

Confirm an up-to-date state with a success icon and a short message.

​

Positive Feedback (illustration)

Confirm success with an illustration and an optional follow-up link.

​

Out of User Control (icon)

Explain a system state the user cannot act on, with an icon and a short message.

​

Out of User Control (illustration)

Explain a longer system process with an illustration, headline, and detail.

​

Empty Error (icon)

Report an error with a subdued icon and an inline recovery link.

​

Empty Error (illustration)

Report an error with an illustration, an inline recovery link, and a recovery action.

​

Starting Points

Offer a set of suggested next actions in interactive cards to help the user begin.

​

Best Match

Show a no-results state with recommended alternatives the user can act on.

​

Queue Cleared

Celebrate a cleared queue or completed work with a light illustration.