EmptyState
React empty state for no data, no results, and error screens, with media, title, description, and actions, or composable parts. RTL ready.
EmptyState fills empty lists, searches, and error screens. Pass title, description, and action, or compose the parts directly.
When to use
Use EmptyState when a list, search, or dashboard has nothing to show: no requests yet, no matches, or a failed load. Say what happened, why, and what to do next, and offer the next action as a button.
Use the semantic variants for errors and use plain variants for first-run screens.
Examples
Props
Props declared by EmptyState. Native attributes of the underlying element pass through.
<EmptyState>
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "search" | "default" | "error" | "success" | ||
size | "sm" | "md" | "lg" | ||
icon | react.ReactNode | Leading media (icon or illustration). Pass false to hide the media.
Defaults to a variant-appropriate icon. Ignored when children is set. | |
title | react.ReactNode | Title. Ignored when children is set. | |
description | react.ReactNode | Supporting description below the title. Ignored when children is set. | |
action | react.ReactNode | Primary action, e.g. a <Button>. Ignored when children is set. | |
secondaryAction | react.ReactNode | Secondary action beside the primary one. Ignored when children is set. | |
asChild | boolean | Render the consumer's own element as the root (Radix Slot) instead of a
<div>, so the empty-state surface can compose with a custom container.
As with the other composable parts, supply a single child element. |
<EmptyStateTitle>
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | Override the heading element (e.g. render an <h2> on full-page states). |
<EmptyStateDescription>
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean |
<EmptyStateActions>
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean |
Accessibility
The title is a heading and the description is text, so the state is announced in order. Media is decorative and hidden from assistive technology.
Actions are real buttons or links, so keyboard users can recover without leaving the page.