Empty State
A unified empty state component with variant support for basic, actions, and error recovery states. Includes 10 built-in illustrations. (PPL/SMB experimental block)
Basic (Default)
Simple empty state with illustration, title, and description. No action buttons or recovery links.
Empty state title
This is some useful descriptive text to tell the user what may have happened
Custom Content
Basic variant with custom illustration, title, and description.
No records found
Try adjusting your search or filter criteria to find what you're looking for.
Actions Variant
Empty state with primary and secondary action buttons for guiding users to take next steps.
No items yet
Get started by adding your first item to this collection.
Error Variant
Error recovery state with links to reload, check status page, and contact support. Uses role="status" for screen reader auto-announce.
Something went wrong
We couldn't load your data. Please try one of the options below.
Reload the page to try again.
Review our status page (opens in new tab) to see if there's a known problem.
Contact Support (opens in new tab) if the problem persists.
Different Heading Level
Rendered with an h2 heading instead of the default h3 for semantic flexibility.
Nothing here yet
Start by adding your first item.
Available Illustrations
All 10 built-in SVG illustrations that can be used with any variant via the illustration prop.
All Done Flag Day
All Done Flag Night
Done Person Day
Done Person Night
Folder
Magnifying Glass
Office Day
Office Night
Tick
Warning Sign