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." />

Props API

27 props
Columns
Empty State props API
Default
Description
actionAriaLabelstringNoprops—Optional accessible label for the action button. Helpful when the visible action text is ambiguous.
actionButtonClassNamestringNoprops—Additional class names for the action button.
actionLabelReactNodeNoprops—Optional label for an action button.
aria-describedbystringNoaria—Optional custom accessible description reference for the empty state region. If provided, overrides the generated message association.
aria-labelstringNoaria—Optional custom accessible label for the entire empty state region. Useful when the title is visual but not sufficient as a landmark label.
aria-labelledbystringNoaria—Optional custom accessible label reference for the entire empty state region. If provided, overrides the generated title association.
classNamestringNostyling—Additional CSS class names for the empty state root.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
glassbooleanNopropsconfigured default glass setting (fallback: false)Applies a translucent frosted-glass treatment using the active theme palette.
iconIconTypeNoprops—Optional icon component (e.g., from react-icons).
iconAriaLabelstringNoprops—Accessible label for the icon when it is not decorative.
iconClassNamestringNoprops—Additional class names for the icon wrapper.