Sections

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 or results

Section titled No data or results

Typical use-case for an empty state is when a feature has no data or a search/filter operation yields no results.

Actionable

Section titled Actionable

If the user is able to address the situation resulting in an empty state, it is appropriate to include a button for them to do so.

<div class="s-empty-state wmx4 p48">
    @Svg.Spot.Empty.With("native")
    <h4 class="s-empty-state--title">No questions match your result.</h4>
    <p>Try refining your search term or trying something more general.</p>
    <button class="s-btn s-btn__tonal">Clear filters</a>
</div>

No questions match your result.

Try refining your search term or trying something more general.

Non-actionable

Section titled Non-actionable

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

<div class="s-empty-state wmx4 p48">
    @Svg.Spot.Empty.With("native")
    <h4 class="s-empty-state--title">User trends not ready</h4>
    <p>Please check back in a few days.</p>
</div>

User trends not ready

Please check back in a few days.

Minimal

Section titled Minimal

If desired, both the title and call-to-action may be omitted for a minimal look.

<div class="s-empty-state wmx4 p48">
    @Svg.Spot.Empty.With("native")
    <p>There’s no data associated with <a href="#" class="s-link s-link__underlined">this account</a>.</p>
</div>

There’s no data associated with this account.