Empty State

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

Usage

Default

Nothing to Show

This section doesn't have any content yet.

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

Props

Data table
	Type	Description
actionAriaLabel	string	Optional accessible label for the action button. Helpful when the visible action text is ambiguous.
actionLabel	ReactNode	Optional label for an action button.
aria-describedby	string	Optional custom accessible description reference for the empty state region. If provided, overrides the generated message association.
aria-label	string	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	Optional custom accessible label reference for the entire empty state region. If provided, overrides the generated title association.
data-testid	string	Optional test ID for testing frameworks.
icon	IconType	Optional icon component (e.g., from react-icons).
iconAriaLabel	string	Accessible label for the icon when it is not decorative.
iconDecorative	boolean	Whether the icon should be announced to assistive technology. Defaults to false.
id	string	Optional ID for the root empty state container. Useful for external aria-labelledby / aria-describedby wiring.
message	ReactNode	Optional supporting message below the title.
onActionClick	(() => void)	Optional click handler for the action button.
outline	boolean	Whether the component uses outline styles.
role	AriaRole	Optional role override. Defaults to "region" when a title exists, otherwise no role is applied.
rounding	RoundingType	Controls the rounding of the component ('none' \| 'small' \| 'medium' \| 'large' \| 'full').
shadow	ShadowType	Controls the shadow of the component ('none' \| 'light' \| 'medium' \| 'strong' \| 'intense').
size	SizeType	Size modifier ('xs' \| 'small' \| 'medium' \| 'large' \| 'xl').
state	StateType	The EmptyState state ('success' \| 'error' \| 'warning' \| 'disabled' \| '').
theme	ThemeType	Theming option for styling ('primary' \| 'secondary' \| 'tertiary' \| 'quaternary' \| 'clear').
title	ReactNode	Title text displayed prominently.