Empty State Panel
Section-level empty-state chrome — centred icon, title, description, and optional action slot
SSR mode
Examples
With icon, description and action
No results found
Try adjusting your filters or search terms to find what you're looking for.
Minimal — title only
Nothing here yet
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| EmptyStatePanel | Section-level empty-state chrome. Renders a centred column with an optional icon, a required title, an optional muted description, and an optional action slot. Uses a dashed border by default to signal a fillable area. Wrapper-styling. |
EmptyStatePanel
Section-level empty-state chrome. Renders a centred column with an optional icon, a required title, an optional muted description, and an optional action slot. Uses a dashed border by default to signal a fillable area. Wrapper-styling.
| Property | Type | Required | Description |
|---|---|---|---|
| Title | string | Heading for the empty state. Rendered as <h3> in text-lg font-semibold tracking-tight text-foreground. | |
| Description | string? | Supporting muted text in text-sm text-muted-foreground max-w-md. Omit to suppress. | |
| IconSvg | string? | SVG path string for an optional icon rendered at size-12 text-muted-foreground above the title. Omit to suppress. | |
| Action | RenderFragment? | Optional action slot rendered below the description. Typically a single <Button>. | |
| Borders | bool | Toggles border-2 border-dashed border-border rounded-lg. Default: true. | |
| BgFilled | bool | Toggles bg-subtle-bg on the wrapper. Default: false. | |
| Gutters | bool | Toggles py-12 px-6 on the wrapper. Default: true. |