Empty states

Empty states are used when there is no data to show. Ideally they orient the user by providing feedback based on the the user’s last interaction or communicate the benefits of a feature. When appropriate, they should explain the next steps the user should take and provide guidance with a clear call-to-action.

No data

Used when a user hasn’t interacted with a feature yet.

No data actionable

If the user can take an action to fix the situation, it's best to draw attention to it, explain next steps, and provide a call-to-action.

<div class="s-empty-state wmx4 p48">
    <svg>…</svg>
    <p>Why is this blank? Explain it.</p>
    <a class="s-btn s-btn__filled">Call to action</a>
</div>

We haven’t received any data yet. Have you connected your Stack Overflow account?

Connect my account

No data non-actionable

If the user can’t take an action to fix the situation, it’s more appropriate to set expectations.

<div class="s-empty-state wmx4 p48">
    <svg>…</svg>
    <p>Why is this blank? Explain it.</p>
</div>

There’s no data associated with your account yet. Please check back tomorrow.

No results

When someone performs an action that returns nothing, a blank state can explain what happened and help get someone back on track.

No results actionable

If the user can take an action to fix the situation, it’s best to draw attention to it and provide a call-to-action.

<div class="s-empty-state wmx4 p48">
    <svg>…</svg>
    <p>Why is this blank? Explain it.</p>
    <a class="s-btn s-btn__filled">Call to action</a>
</div>

We couldn’t find any tags matching stacks-1-0-0. It might not exist yet. Would you like to create it?

Create this tag

No results non-actionable

If the user can’t take an action to fix the situation, it’s more appropriate to set expectations.

<div class="s-empty-state wmx4 p48">
    <svg>…</svg>
    <p>Why is this blank? Explain it.</p>
</div>

We couldn’t match users for Namey McUser. Try refining your search or trying something more general.