A React empty-state component with icon, title, description, and action for guiding web users.
Import the EmptyState component and access all parts using dot notation.
import {EmptyState} from "@heroui-pro/react";
<EmptyState>
<EmptyState.Media />
<EmptyState.Header>
<EmptyState.Title />
<EmptyState.Description />
</EmptyState.Header>
<EmptyState.Content />
</EmptyState>.empty-state - Base centered column layout.empty-state--sm - Small size (less padding and gap).empty-state--md - Medium size (default).empty-state--lg - Large size (more padding and gap).empty-state__header - Groups media, title, and description.empty-state__media - Icon or avatar container.empty-state__title - Primary heading text.empty-state__description - Secondary descriptive text.empty-state__content - Action area for buttons, inputs, or links[data-variant="icon"] on .empty-state__media - Adds circular muted background for icon display[data-variant="default"] on .empty-state__media - Default media styling (no background)The root component. Renders a centered container for empty state content.
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Size variant controlling padding and spacing |
children | ReactNode | - | Empty state content |
className | string | - | Additional CSS class |
render | DOMRenderFunction | - | Custom render function to override the default div element |
Also supports all native div HTML attributes.
Groups the media, title, and description elements.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Header content |
Also supports all native div HTML attributes.
Container for icons, avatars, or images.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'icon' | 'default' | "icon" adds a circular muted background |
children | ReactNode | - | Media content |
Also supports all native div HTML attributes.
Primary heading rendered as an h3.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Title text |
Also supports all native h3 HTML attributes.
Secondary descriptive text rendered as a p.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Description text |
Also supports all native p HTML attributes.
Action area for buttons, links, or other interactive elements.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Action content |
Also supports all native div HTML attributes.