Empty State

The Empty State component provides a way to display an empty state with an optional icon, title, message, and action button.

Usage & Examples

Default

Nothing to Show

This section doesn't have any content yet.

default.tsx

<EmptyState title="Nothing to Show" message="This section doesn't have any content yet." />

Visual variants

Themes

primary

Nothing to Show

This section doesn't have any content yet.

secondary

Nothing to Show

This section doesn't have any content yet.

tertiary

Nothing to Show

This section doesn't have any content yet.

quaternary

Nothing to Show

This section doesn't have any content yet.

States

success

Nothing to Show

This section doesn't have any content yet.

warning

Nothing to Show

This section doesn't have any content yet.

error

Nothing to Show

This section doesn't have any content yet.

info

Nothing to Show

This section doesn't have any content yet.

Sizes

Nothing to Show

This section doesn't have any content yet.

small

Nothing to Show

This section doesn't have any content yet.

medium

Nothing to Show

This section doesn't have any content yet.

large

Nothing to Show

This section doesn't have any content yet.

Variants

solid

Nothing to Show

This section doesn't have any content yet.

outline

Nothing to Show

This section doesn't have any content yet.

glass

Nothing to Show

This section doesn't have any content yet.

Rounding

none

Nothing to Show

This section doesn't have any content yet.

medium

Nothing to Show

This section doesn't have any content yet.

large

Nothing to Show

This section doesn't have any content yet.

Shadows

none

Nothing to Show

This section doesn't have any content yet.

light

Nothing to Show

This section doesn't have any content yet.

strong

Nothing to Show

This section doesn't have any content yet.

visual-variants.tsx

// Themes
<EmptyState theme="primary" title="Nothing to Show" message="This section doesn't have any content yet." />
<EmptyState theme="secondary" title="Nothing to Show" message="This section doesn't have any content yet." />
<EmptyState theme="tertiary" title="Nothing to Show" message="This section doesn't have any content yet." />
<EmptyState theme="quaternary" title="Nothing to Show" message="This section doesn't have any content yet." />

// States
<EmptyState state="success" title="Nothing to Show" message="This section doesn't have any content yet." />
<EmptyState state="warning" title="Nothing to Show" message="This section doesn't have any content yet." />
<EmptyState state="error" title="Nothing to Show" message="This section doesn't have any content yet." />
<EmptyState state="info" title="Nothing to Show" message="This section doesn't have any content yet." />

// Sizes
<EmptyState size="xs" title="Nothing to Show" message="This section doesn't have any content yet." />
<EmptyState size="small" title="Nothing to Show" message="This section doesn't have any content yet." />
<EmptyState size="medium" title="Nothing to Show" message="This section doesn't have any content yet." />
<EmptyState size="large" title="Nothing to Show" message="This section doesn't have any content yet." />

// Variants
<EmptyState variant="solid" title="Nothing to Show" message="This section doesn't have any content yet." />
<EmptyState variant="outline" title="Nothing to Show" message="This section doesn't have any content yet." />
<EmptyState variant="glass" title="Nothing to Show" message="This section doesn't have any content yet." />

// Rounding
<EmptyState rounding="none" title="Nothing to Show" message="This section doesn't have any content yet." />
<EmptyState rounding="medium" title="Nothing to Show" message="This section doesn't have any content yet." />
<EmptyState rounding="large" title="Nothing to Show" message="This section doesn't have any content yet." />

// Shadows
<EmptyState shadow="none" title="Nothing to Show" message="This section doesn't have any content yet." />
<EmptyState shadow="light" title="Nothing to Show" message="This section doesn't have any content yet." />
<EmptyState shadow="strong" title="Nothing to Show" message="This section doesn't have any content yet." />

Props API

Empty State props API
				Default	Description
`actionAriaLabel`	`string`	No	props	`—`	Optional accessible label for the action button. Helpful when the visible action text is ambiguous.
`actionButtonClassName`	`string`	No	props	`—`	Additional class names for the action button.
`actionLabel`	`ReactNode`	No	props	`—`	Optional label for an action button.
`aria-describedby`	`string`	No	aria	`—`	Optional custom accessible description reference for the empty state region. If provided, overrides the generated message association.
`aria-label`	`string`	No	aria	`—`	Optional custom accessible label for the entire empty state region. Useful when the title is visual but not sufficient as a landmark label.
`aria-labelledby`	`string`	No	aria	`—`	Optional custom accessible label reference for the entire empty state region. If provided, overrides the generated title association.
`className`	`string`	No	styling	`—`	Additional CSS class names for the empty state root.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`icon`	`IconComponent`	No	props	`—`	Optional SVG icon component.
`iconAriaLabel`	`string`	No	props	`—`	Accessible label for the icon when it is not decorative.
`iconClassName`	`string`	No	props	`—`	Additional class names for the icon wrapper.
`iconDecorative`	`boolean`	No	props	`true`	Whether the icon should be announced to assistive technology. Defaults to false.