Empty State

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

EmptyState is used to display a message when there is no content to show, providing clear guidance on what users can do next or why content is unavailable. It provides a flexible interface for displaying empty content states with optional icons, illustrations, and actions. Built on FlexBox layout, it ensures consistent spacing and alignment while supporting various visual configurations for different use cases.

Props

Name	Type	Default	Description
`actionsSlot`	`ReactNode`	—	Custom actions region. Replaces `primaryAction` when provided.
`className`	`string`	—	Classes appended after generated layout classes.
`description`	`LocalizedMessage \| DisplayValue`	—	Secondary copy below the title. Copy or runtime data (for example an error message).
`icon`	`Glyph`	—	Glyph shown in the icon well above the title at `IconSize.Medium` (ES-2).
`id`	`string`	—	Element id.
`primaryAction`	`ReactNode`	—	Primary action below the description. Ignored when `actionsSlot` is set.
`ref`	`Ref<HTMLDivElement>`	—	Ref to the root layout host.
`title`	`LocalizedMessage`	—	Primary heading. Omit to show only a description.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Basic Empty State

Use for simple empty states with just title and description text.

With Icon

Use for empty states that benefit from visual reinforcement of the message.

With Illustration

Use for empty states that need more visual impact or brand consistency.

With Primary Action

Use for empty states that guide users toward a clear next step.

With Custom Actions

Use for empty states that need multiple actions or custom action layouts.

With Rich Content

Use for empty states that need formatted content or multiple paragraphs.

Search Results

Use for empty search results with actionable guidance.

Error States

Use for empty states caused by errors or failures.

Loading States

Use for empty states while content is loading.

Compact Variant

Use for smaller empty states in constrained spaces.

Empty State / Usage

Empty State / Accessibility

On this page

Empty State

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Props

Name	Type	Default	Description
`actionsSlot`	`ReactNode`	—	Custom actions region. Replaces `primaryAction` when provided.
`className`	`string`	—	Classes appended after generated layout classes.
`description`	`LocalizedMessage \| DisplayValue`	—	Secondary copy below the title. Copy or runtime data (for example an error message).
`icon`	`Glyph`	—	Glyph shown in the icon well above the title at `IconSize.Medium` (ES-2).
`id`	`string`	—	Element id.
`primaryAction`	`ReactNode`	—	Primary action below the description. Ignored when `actionsSlot` is set.
`ref`	`Ref<HTMLDivElement>`	—	Ref to the root layout host.
`title`	`LocalizedMessage`	—	Primary heading. Omit to show only a description.