Basic Usage
Simple empty state with icon, title, description, and action
No articles found
Get started by creating your first article
Codetsx
Without Action
Empty state without action button
Inbox is empty
You're all caught up! No new messages.
Search Results
Empty state for search results
No results found
Try adjusting your search or filter to find what you're looking for.
Multiple Actions
Empty state with multiple action buttons
No team members yet
Invite your team to start collaborating
Props
| Name | Type | Default | Description |
|---|---|---|---|
icon | React.ReactNode | — | Icon to display at the top |
title | string | — | Title of the empty state |
description | string | — | Optional descriptive text |
action | React.ReactNode | — | Action button(s) to display |
className | string | — | Additional CSS classes |
Usage Guidelines
When to use
- When there is no content to display (empty lists, search results, etc.)
- To guide users towards the next action
- To provide an explanation for why there is no content
Use Cases
First-run experience screens
No search results placeholders
Empty collection views
Error state recovery screens