Empty State
Shown where content would be, explaining why it is empty and what to do next.
- Feedback
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add empty-statenpm packages installed: class-variance-authority.
import { EmptyState } from "@/components/ui/empty-state";Nothing Yet
No Results
Minimal
<EmptyState>
| Prop | Type | Default |
|---|---|---|
bordered | boolean | — |
size | "sm" | "md" | "lg" | "md" |
Plus every attribute of <div>.
<EmptyStateIcon>
Plus every attribute of <div>.
<EmptyStateTitle>
Plus every attribute of <p>.
<EmptyStateDescription>
Plus every attribute of <p>.
<EmptyStateActions>
Plus every attribute of <div>.
A plain container with no implicit landmark or live region. When it replaces content after a search, put aria-live on the results region so the change is announced. The icon is decorative — the title has to carry the message on its own.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes