EmptyStateBlock

An empty state display with illustration, title, description, and action buttons.

Import


import { EmptyStateBlock } from "@raydenui/ui/blocks";

Usage

Preview


<EmptyStateBlock
  illustration="task-templates"
  title="No tasks to show"
  description={`You don't have any pending tasks for today.\nAdd new tasks to track productivity`}
  action={{ label: "New Task", icon: "plus" }}
/>

No Results Variant

Preview


<EmptyStateBlock
  illustration="search"
  illustrationColored={false}
  title="No results found"
  description={`"Access" did not match any results.\nPlease try again`}
/>

Card Variant


<EmptyStateBlock
  illustration="gallery"
  variant="card"
  title="Ready to add some photos?"
  description={`Tap the button below to upload and\nshare photos with your community`}
  action={{ label: "Upload Photos", icon: "upload" }}
/>

Illustrations

illustration accepts an IllustrationName. These nineteen are the complete set:

Illustration	Illustration	Illustration
`calendar`	`chat`	`contacts`
`dashboard`	`favorites`	`file-manager`
`forms`	`gallery`	`inbox`
`invoice`	`notifications`	`product-catalog`
`project-list`	`search`	`shopping-cart`
`subscriptions`	`survey`	`task-templates`
`team`

Props

Prop	Type	Default	Description
`illustration`	`IllustrationName`	—	Required. One of the nineteen names above.
`title`	`string`	—	Required. Bold title text.
`description`	`string`	—	Required. Supports `\n` for line breaks.
`action`	`EmptyStateBlockAction`	—	A single optional action.
`variant`	`"inline" \| "card"`	`"inline"`	`inline` has no wrapper; `card` draws a `--color-surface` panel.
`illustrationColored`	`boolean`	`true`	Coloured or monochrome illustration.
`illustrationPalette`	`string[]`	—	Literal colours. A customisation surface, not a theme role.
`illustrationSize`	`number`	—	Illustration size in pixels.
`className`	`string`	—	Additional class names.

illustrationPalette values do not follow light or dark mode. Supply mode-appropriate colours yourself, or omit it to inherit the flavor’s illustration palette.

EmptyStateBlockAction

Prop	Type	Required	Description
`label`	`string`	Yes	Button label.
`icon`	`ReactNode \| IconName`	No	A library icon name or your own node.
`onClick`	`() => void`	No	Click handler.

States

Default only. The block presents an absence your application has already detected.

Accessibility

Illustrations are decorative and hidden from assistive technology.
The action is a native button with a visible focus ring.
description supports multi-line content through \n.

Known limitations

variant selects the wrapper, not the illustration. The illustration is chosen with the separate illustration prop.
Exactly one action is supported. There is no secondary action.
The block does not distinguish an empty source from a search with no matches — that difference lives entirely in the title and description you pass. The two demos above show both wordings.