ObjectUIComponentsFeedback
Empty
Empty state placeholder with optional action
The Empty component displays a placeholder when there's no content to show.
Basic Usage
Basic Empty State
{
"type": "empty",
"title": "No results found",
"description": "Try adjusting your search or filters"
}With Icon
With Icon
{
"type": "empty",
"icon": "inbox",
"title": "No messages",
"description": "Your inbox is empty"
}With Action
With Action Button
{
"type": "empty",
"icon": "folder-plus",
"title": "No projects yet",
"description": "Get started by creating your first project",
"action": {
"type": "button",
"label": "Create Project",
"variant": "default"
}
}Schema
interface EmptySchema {
type: 'empty';
icon?: string; // Lucide icon name
title?: string; // Main message
description?: string; // Supporting text
action?: ComponentSchema; // Call to action button
className?: string;
}Examples
Search Results
Empty Search Results
{
"type": "empty",
"icon": "search",
"title": "No results for \"example\"",
"description": "Try searching with different keywords",
"action": {
"type": "button",
"label": "Clear Search",
"variant": "outline"
}
}Empty List
Empty Team List
{
"type": "empty",
"icon": "users",
"title": "No team members",
"description": "Invite people to join your team",
"action": {
"type": "button",
"label": "Invite Team Members",
"variant": "default",
"icon": "user-plus"
}
}