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.