Components
Empty State
What a screen says before there is any data: explain, then offer the first action.
Default
No notes yet
Your writing lives here once you create your first note.
<Empty>
<EmptyHeader>
<EmptyMedia variant="icon">
<FileTextIcon />
</EmptyMedia>
<EmptyTitle>No notes yet</EmptyTitle>
<EmptyDescription>
Your writing lives here once you create your first note.
</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button>New note</Button>
</EmptyContent>
</Empty>Outline & background
No drafts
Dashed outline for an inline slot.
Library empty
Filled background for a card region.
{/* Outline: dashed border */}
<Empty className="border border-dashed border-separator">…</Empty>
{/* Background: subtle fill */}
<Empty className="bg-bg-elevated/60">…</Empty>Avatar & avatar group
bm
No collaborators
Invite someone to this workspace.
mk bl +3
Team is away
No reviewers online right now.
With input
No results
Try another query, or browse everything.
Markdown for agents: /design/empty-state.md · spec: /design.md