Empty State Component

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.

<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>

No results

Try adjusting your filters or search query.

<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>

Recent activity

No activity yet

Activity from your team will show up here.

<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>

Empty State

Sizes