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.
Used when a user hasn’t interacted with a feature yet.
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.Spot.EmptyXL.With("mb24")
<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 accountIf 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.Spot.EmptyXL.With("mb24")
<p>Why is this blank? Explain it.</p>
</div>There’s no data associated with your account yet. Please check back tomorrow.
When someone performs an action that returns nothing, a blank state can explain what happened and help get someone back on track.
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.Spot.EmptyXL.With("mb24")
<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 tagIf 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.Spot.EmptyXL.With("mb24")
<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.