Empty State

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

Usage

This section doesn't have any content yet.

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

Sortable data table
Prop	Type	Default	Description
icon	React.ReactNode	-	Optional icon to display above the empty state message.
title	string	"Nothing Here Yet"	Main heading text for the empty state.
message	string	"There's no content to display."	Secondary message describing the empty state.
actionLabel	string	-	Label for the primary action button (optional).
onActionClick	(event: React.MouseEvent) => void	-	Callback when the action button is clicked.
theme	"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"	Configured Default	Visual theme for the empty state card.
state	"" \| "success" \| "error" \| "warning"	-	State variant for feedback (e.g., success, error, warning).
size	"xs" \| "small" \| "medium" \| "large" \| "xl"	Configured Default	Size of the card and text.
outline	boolean	false	If true, renders with an outline.
rounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Border radius style.
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Shadow style for the card.
className	string	-	Custom CSS class for the container.
data-testid	string	"empty-state"	Custom test ID for end-to-end or unit testing.