Empty State
Centered placeholder with title, description, and an optional action. Different from Placeholder (skeleton-style) and ErrorState (error UI). Use when a list legitimately has no data yet.
Sizes
sm / md / lg
Each size scales the icon, type, and vertical padding proportionally.
No notes
Add your first note to get started.
No appointments today
Your calendar is clear. Schedule a new appointment when ready.
No patients yet
Add your first patient to start tracking visits, prescriptions, and labs.
razor
<EmptyState Size="sm" Title="No notes" Description="Add your first note to get started." />
<EmptyState Size="md" Title="No appointments today" Description="...">
<Action>
<Button Variant="primary">New appointment</Button>
</Action>
</EmptyState>
<EmptyState Size="lg" Title="No patients yet" Description="...">
<Action>
<Button Variant="primary">Add patient</Button>
<Button Variant="secondary">Import from CSV</Button>
</Action>
</EmptyState>Custom icon
Replace the default illustration
Pass an <Icon> render fragment with your own SVG.
No results
Try adjusting your filters or search query.
razor
<EmptyState Size="md" Title="No results" Description="Try different filters.">
<Icon>
<svg viewBox="0 0 64 64" fill="none">
<circle cx="28" cy="28" r="18" stroke="currentColor" stroke-width="2.5"/>
<path d="M42 42L52 52" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
</svg>
</Icon>
<Action>
<Button Variant="tertiary">Clear filters</Button>
</Action>
</EmptyState>Composed inside a card
As the empty state of a list section
Drop EmptyState into any container that has a heading or chrome of its own.
razor
<div class="card">
<div class="card-header"><h4>Recent activity</h4></div>
<EmptyState Size="md"
Title="No activity yet"
Description="Activity from your team will show up here." />
</div>