EmptyState
Structured blank-state message with optional media and actions.
Quick Preview
+
No saved homes
Save properties to compare pricing, location, and payment options.
Composition
Use this public composition when building EmptyState:
Empty
├── EmptyHeader
│ ├── EmptyMedia
│ ├── EmptyTitle
│ └── EmptyDescription
└── EmptyContentUsage
<Empty><EmptyHeader><EmptyTitle>No results</EmptyTitle></EmptyHeader></Empty>Examples
Default EmptyState
Use this as the starting point for EmptyState. Keep product data, routing, fetching, and authorization logic in the consuming app.
+
No saved homes
Save properties to compare pricing, location, and payment options.
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
variant | `"default" | "filled" | "outline"` |
variant on EmptyMedia | `"default" | "icon"` | "default" |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Preserve the documented EmptyState composition so labels, triggers, content, and controls remain connected.
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.