EmptyState

A placeholder for an empty data or content area.

Examples

Default

No projects

Create a project to start tracking work.

<EmptyState
  description="Create a project to start tracking work."
  illustration={<Inbox />}
  title="No projects"
/>

Title Only

No projects

<EmptyState
  description={undefined}
  illustration={<Inbox />}
  title="No projects"
/>

No Illustration

No projects

Create a project to start tracking work.

<EmptyState
  description="Create a project to start tracking work."
  illustration={undefined}
  title="No projects"
/>

With Action

No projects

Create a project to start tracking work.

Create project

<EmptyState
  description="Create a project to start tracking work."
  illustration={<Inbox />}
  title="No projects"
  actions={<Button label="Create project" variant="primary" />}
/>

Multiple Actions

No projects

Create a project to start tracking work.

Create projectImport

<EmptyState
  description="Create a project to start tracking work."
  illustration={<Inbox />}
  title="No projects"
  actions={( <> <Button label="Create project" variant="primary" /> <Button label="Import" variant="secondary" /> </> )}
/>

Compact

No projects

Create a project to start tracking work.

<EmptyState
  description="Create a project to start tracking work."
  illustration={<Inbox />}
  title="No projects"
  isCompact
/>

Compact With Actions

No projects

Create a project to start tracking work.

Create projectImport

<EmptyState
  description="Create a project to start tracking work."
  illustration={<Inbox />}
  title="No projects"
  actions={( <> <Button label="Create project" variant="primary" /> <Button label="Import" variant="secondary" /> </> )}
  isCompact
/>

Custom Heading Level

No projects

Create a project to start tracking work.

<EmptyState
  description="Create a project to start tracking work."
  illustration={<Inbox />}
  title="No projects"
  headingLevel={2}
/>

API

EmptyState

A placeholder for an empty data or content area.

Prop	Type	Default	Description
actions	ReactNode	—	Action controls rendered below the text.
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the root element.
description	string	—	Supporting text.
headingLevel	1 | 2 | 3 | 4 | 5 | 6	4	Semantic heading level for the title.
illustration	ReactNode	—	Decorative illustration or large icon rendered above the title.
isCompact	boolean	false	Whether to use tighter spacing for constrained areas.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the root element.
style	CSSProperties	—	Inline styles applied to the root element.
title*	string	—	Primary empty-state message.