EmptyState
Zero-results / zero-data placeholder for tables, panels, and filtered views.
Props
EmptyState extends HTMLAttributes<HTMLDivElement> (minus title).
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | — | Icon before the message. |
title | ReactNode | — | Primary message. |
description | ReactNode | — | Secondary explanatory text. |
action | ReactNode | — | Action content. |
compact | boolean | — | Tighter paddings for inside a card or table body. |
Examples
Basic
No results found
With icon
With action
Compact
No items
This list is empty.
import { EmptyState } from "@solarius/onset";
import { Button } from "@solarius/onset";
import { IconSearch } from "@tabler/icons-react";
<EmptyState
icon={<IconSearch size={20} />}
title="No results found"
description="Try adjusting your search criteria."
action={<Button variant="primary">Clear filters</Button>}
/>;