Empty
Empty-state layouts for no-data, no-results, and first-run product screens.
Features
Centered empty states
Action-ready layout
Semantic HTML
Token-aligned styling
Examples
Empty examples are layout recipes for no-data states. Pair one decorative icon with a clear heading and description, then add a single focused action when the user can recover.
Default
A centered no-data state with decorative icon, heading, and supporting copy.
No preview output yet.
With action
A first-run empty state with one primary action for creating new content.
No preview output yet.
Search results
A no-results state with a secondary recovery action for clearing filters.
No preview output yet.
Accessibility
Use a heading level that fits the page structure.
Keep decorative icons hidden with
aria-hidden.Put the next best action after the description when recovery is possible.
Avoid using
role="alert"unless the empty state is the result of a live update that must be announced.