Overview
EmptyCard displays centered empty states with icon, title, description, and optional recovery action. Use standalone (never nest inside PageCard) for 'no data' scenarios.
Key Features
- Centered layout with icon, title, and description
- Optional recovery action button for filtered states
- Custom icon and border colors for different states
- Consistent styling that replaces content areas
Examples
Basic Empty State
Simple empty state for when no data exists yet.
No items found
There are no items to display yet. Items will appear here once they are created.
Search Results Empty
When a search query returns no matches.
No results found
We couldn't find anything matching your search. Try different keywords.
Filtered Results Empty
When filters produce no results, offer a recovery action.
No matching items
No items match your current filters. Try adjusting or clearing them.
Success/Completion State
Positive empty state when all items are completed.
All tasks completed!
Great work! You're all caught up. Enjoy your free time.
Warning/Action Required
Alert the user when action is needed.
Action Required
Your subscription has expired. Renew to continue accessing features.
Error State
When data failed to load, offer a retry action.
Failed to load
Something went wrong while loading your data. Please try again.
Inline Variant (Inside PageCard)
Use variant="inline" when EmptyCard is inside PageCard or another Card to avoid double borders.
No users yet
Users will appear here once they are added to this project.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
icon | IconDefinition | required | FontAwesome icon to display above the title |
title | string | required | Main heading text for the empty state |
description | string | - | Explanatory text below the title |
action | ReactNode | - | Optional React node for recovery button |
variant | "card" | "inline" | - | Display variant (default: "card"). Use "inline" when inside PageCard/Card to avoid double borders |
className | string | - | Additional CSS classes (use for border colors) |
iconClassName | string | - | CSS classes for the icon (use for icon colors) |
Usage
import { EmptyCard, PageCard } from '@/ui/components';
import { Button } from '@/ui/primitives';
import { faInbox, faSearch, faCheckCircle } from '@fortawesome/duotone-regular-svg-icons';
// Basic empty state (standalone - default variant="card")
<EmptyCard
icon={faInbox}
title="No items found"
description="There are no items to display yet."
/>
// Inline variant - use INSIDE PageCard or other Card wrapper
<PageCard>
<EmptyCard
variant="inline"
icon={faUsers}
title="No users yet"
description="Users will appear here once added."
/>
</PageCard>
// With recovery action (filtered/searched empty state)
<EmptyCard
icon={faSearch}
title="No results found"
description="Try adjusting your filters."
action={
<Button variant="default">
<Icon icon={faFilter} />
Clear Filters
</Button>
}
/>
// Success state with custom styling
<EmptyCard
icon={faCheckCircle}
title="All tasks completed!"
description="Great work! You're all caught up."
className="border-success"
iconClassName="text-success"
/>
// Error state with retry action
<EmptyCard
icon={faExclamationCircle}
title="Failed to load"
description="Something went wrong. Please try again."
className="border-destructive"
iconClassName="text-destructive"
action={<Button variant="default">Retry</Button>}
/>