Empty State
What a list, table, or panel shows when it has nothing to show.
No data yet
Records will appear here once they are added.
The three types are different situations
no-data means nothing exists yet, so the useful action is to create something. no-results means things exist but the current filter hides them, so the action is to relax the filter. error means the request failed and the action is to retry. Sending all three to the same generic message wastes the one moment the screen has the reader's full attention.
No data yet
Records will appear here once they are added.
No results found
Try adjusting your search or removing filters.
Couldn't load data
Something went wrong while fetching records.
Custom copy and action
The defaults are deliberately generic. Replace them with something specific to what's missing wherever you can.
No leads yet
Once you connect a source, new leads land here automatically.
Custom icon
Inbox zero
Nothing needs your attention right now.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'no-data' | 'no-results' | 'error' | 'no-data' | Picks the default icon and copy. |
| title | string | Overrides the type's default headline. | |
| description | string | Overrides the type's default supporting line. | |
| actionLabel | string | Button label. Omit to render no button. | |
| onAction | () => void | Fires when the action button is clicked. | |
| icon | ReactNode | Overrides the type's default icon. |