Empty State Examples
The EmptyState component provides visual feedback when no data is available, with support for custom icons, images/illustrations, descriptions, and action buttons.
Default Empty State #
A simple empty state with title only.
No items yet
<EmptyState Title="No items yet" />With Description #
Add context with a description message.
No users found
Try adjusting your search criteria or add a new user.
<EmptyState Title="No users found"
Description="Try adjusting your search criteria or add a new user." />With Action Button #
Guide users with a call-to-action button.
No products
Get started by adding your first product.
<EmptyState Title="No products"
Description="Get started by adding your first product.">
<Action>
<Button>
<PlusIcon class="w-4 h-4 mr-2" />
Add Product
</Button>
</Action>
</EmptyState>Multiple Actions #
Provide primary and secondary action options.
No projects
Create a new project or import from another tool.
<EmptyState Title="No projects"
Description="Create a new project or import from another tool.">
<Action>
<Button>
<PlusIcon class="w-4 h-4 mr-2" />
Create Project
</Button>
</Action>
<SecondaryAction>
<Button Color="ButtonColor.Gray">
Import
</Button>
</SecondaryAction>
</EmptyState>Custom Icon #
Replace the default icon with a custom one.
No search results
We couldn't find anything matching your search.
<EmptyState Title="No search results"
Description="We couldn't find anything matching your search.">
<Icon>
<SearchIcon class="w-12 h-12 text-gray-400 dark:text-gray-500" />
</Icon>
</EmptyState>With Image/Illustration #
Use the Image slot for larger illustrations. Takes precedence over Icon.
No notifications
You're all caught up! Check back later for updates.
<EmptyState Title="No notifications"
Description="You're all caught up! Check back later for updates.">
<Image>
<svg class="w-32 h-32 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</Image>
</EmptyState>Full Featured #
Combine image, title, description, and multiple actions.
Welcome to your dashboard
Your workspace is ready. Start by creating your first item or exploring the documentation.
<EmptyState Title="Welcome to your dashboard"
Description="Your workspace is ready. Start by creating your first item or exploring the documentation.">
<Image>
<svg class="w-40 h-40 text-primary-200 dark:text-primary-900" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
</svg>
</Image>
<Action>
<Button>
<PlusIcon class="w-4 h-4 mr-2" />
Get Started
</Button>
</Action>
<SecondaryAction>
<Button Color="ButtonColor.Light">
View Documentation
</Button>
</SecondaryAction>
</EmptyState>