Components
Empty states
Explain absence of work and offer a useful next step when the source has one.
On this page
Purpose and composition
Explain absence of work and offer a useful next step when the source has one.
Use for actual empty data in the isolated fixture; never substitute absence for a failed request.
Anatomy
| Part | Responsibility |
|---|---|
| Icon | Decorative contextual symbol |
| Title | What is absent |
| Description | Reason or expectation |
| Action | Optional React node |
Configuration and variants
| Input / variant | Contract |
|---|---|
| icon/title/description | Required content |
| action | Optional; parent owns callback |
| geometry | Minimum 320px; centered max-width description |
States and feedback
| State | Visible / behavioral result |
|---|---|
| Empty queue | Queue-specific message |
| Missing selection | Choose a conversation |
| No matches | Filter/search-specific context should stay distinct |
Interaction and responsive behavior
- Keep empty state in the working region.
- Provide an action only when it resolves the absence.
- Use source semantics rather than placeholder rows that imply records exist.
Accessibility contract
- h3 and readable description explain state.
- Action retains its native accessible control.
Known implementation limits
The primitive has no automatic live region or loading/error distinction.
Composition example
<EmptyState icon="mark_email_read" title="No conversations here" description="New messages appear when they need attention." />Source references
| File | Responsibility |
|---|---|
| components/ui/primitives.tsx | EmptyState |
| components/inbox/conversation-list.tsx | Queue-specific empty composition |
Examples from the app
Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0