Loading...
Loading...
> A placeholder component for displaying empty states with optional icon, title, description, and action button.
1import { EmptyState } from "@/components/ui/empty-state";
When you receive messages, they will appear here.
1<EmptyState2 icon={Inbox}3 title="No messages yet"4 description="When you receive messages, they will appear here."5/>
Get started by creating your first project.
1<EmptyState2 icon={FolderOpen}3 title="No projects found"4 description="Get started by creating your first project."5 action={{6 label: "Create Project",7 onClick: () => handleCreate(),8 }}9/>
Try adjusting your search terms or filters.
1<EmptyState2 icon={Search}3 title="No results found"4 description="Try adjusting your search terms or filters."5 action={{6 label: "Clear Filters",7 onClick: () => handleClearFilters(),8 }}9/>
Invite team members to collaborate on this project.
1<EmptyState2 icon={Users}3 title="No team members"4 description="Invite team members to collaborate on this project."5 action={{6 label: "Invite Members",7 onClick: () => handleInvite(),8 }}9/>
Something went wrong. Please try again later.
1<EmptyState2 icon={FileX}3 title="Failed to load data"4 description="Something went wrong. Please try again later."5 action={{6 label: "Retry",7 onClick: () => handleRetry(),8 }}9/>
Your content will appear once you add items.
1<EmptyState2 title="Nothing here yet"3 description="Your content will appear once you add items."4/>
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | LucideIcon | - | Lucide icon component to display |
| title* | string | - | Primary heading text |
| description | string | - | Supporting descriptive text |
| action | { label: string; onClick: () => void } | - | Optional action button configuration |
| className | string | - | Additional CSS classes |