When to use

• First-time use – When a section has no content yet (e.g., “No saved items” in a new account).

• Cleared data – After a user deletes or removes all content (e.g., an empty cart).

• Error or no results – When a search or filter returns no matching content.

Best practices

• Provide context – Clearly explain why the area is empty.

• Offer next steps – Suggest an action (e.g., “Add your first item” or “Try a different search term”).

• Use visuals wisely – Simple icons or illustrations can make empty states feel intentional rather than broken.

<div class="empty-state">
  <p>No items found</p>
  <button>Add New Item</button>
</div>

Empty states should feel helpful, not like an error, guiding users to what they can do next instead of leaving them stuck.