React Empty State
What users see when there's nothing to show — and the moment most tools get sloppy. Three variants on one quiet dashed container: empty (first-run, with the primary CTA), search (no results, with a way out of the filters), and error (destructive accents, role="alert", and a retry). Descriptions explain why it's empty and what to do next, never just "No data."
No test runs yet
Runs appear here after your first regression completes on the grid.
No parts match your filters
Nothing in the catalog matches "0.5 mm pitch" and "automotive grade". Try widening the temperature range.
Couldn't load the register map
The IP-XACT service returned 503. Your session is still valid — retrying usually resolves it.
No alarms
All subsystems nominal for the selected window.
Installation
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'empty' \ | 'search' \ | 'error' |
| title | string | — | Headline |
| description | string | — | Why it's empty + what to do next |
| icon | React.ReactNode | — | Override the variant icon |
| action | React.ReactNode | — | Primary action |
| secondaryAction | React.ReactNode | — | Quieter second action |
| size | 'sm' \ | 'md' | 'md' |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.