Prepared Docs

EmptyState is used to display a message when there is no content to show, providing clear guidance on what users can do next or why content is unavailable. It provides a flexible interface for displaying empty content states with optional icons, illustrations, and actions. Built on FlexBox layout, it ensures consistent spacing and alignment while supporting various visual configurations for different use cases.

Props

Name	Type	Default	Description
`title`	`string`	—	Primary heading text for the empty state.
`actionsSlot`	`ReactNode`	—	Custom actions slot that replaces `primaryAction` when provided.
`asChild`	`boolean`	—	When true, merges props into the child element instead of wrapping it.
`description`	`string`	—	Optional secondary description displayed below the title.
`icon`	`SVGAsset \| ComponentType<{ className?: string; }>`	—	Icon displayed above the content. Accepts an SVG asset or a custom icon component.
`illustration`	`ReactNode`	—	Custom illustration element displayed above the icon area.
`primaryAction`	`ReactNode`	—	Primary action element (e.g., a Button) displayed below the description.

Storybook

Interactive examples and edge cases for this component are in Storybook.

With Illustration And Button

All Variants

Basic Empty State

Use for simple empty states with just title and description text.

With Icon

Use for empty states that benefit from visual reinforcement of the message.

With Illustration

Use for empty states that need more visual impact or brand consistency.

With Primary Action

Use for empty states that guide users toward a clear next step.

With Custom Actions

Use for empty states that need multiple actions or custom action layouts.

With Rich Content

Use for empty states that need formatted content or multiple paragraphs.

Search Results

Use for empty search results with actionable guidance.

Error States

Use for empty states caused by errors or failures.

Loading States

Use for empty states while content is loading.

Compact Variant

Use for smaller empty states in constrained spaces.

Empty State / Usage

Empty State / Accessibility

Props

Name	Type	Default	Description
`title`	`string`	—	Primary heading text for the empty state.
`actionsSlot`	`ReactNode`	—	Custom actions slot that replaces `primaryAction` when provided.
`asChild`	`boolean`	—	When true, merges props into the child element instead of wrapping it.
`description`	`string`	—	Optional secondary description displayed below the title.
`icon`	`SVGAsset \| ComponentType<{ className?: string; }>`	—	Icon displayed above the content. Accepts an SVG asset or a custom icon component.
`illustration`	`ReactNode`	—	Custom illustration element displayed above the icon area.
`primaryAction`	`ReactNode`	—	Primary action element (e.g., a Button) displayed below the description.