A placeholder for an empty Table/List — nothing to switch on, unlike Skeleton, which is a loading state, not an empty-result state.
tsx
No resultsTry a different search term.
<EmptyState />Examples
action is the natural next step out of the empty state — creating the first record, or clearing
a filter that matched nothing:
tsx
No resultsTry a different search term.
<EmptyState
icon="search"
title="No results"
description="Try a different search term."
action={<Button onClick={clearSearch}>Clear search</Button>}
/>Distinguish the reason the state is empty in title/description — "No invoices yet" (nothing
created) reads differently than "No invoices match your filters" (something to undo), even though
both render the same component.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| action | readonly | — | — |
| description | readonly | — | — |
| icon | readonly | — | Decorative — this component isn't the one giving it an accessible name, so pass an icon without its own `title`. |
| title * | readonly | — | — |