EmptyState

feedback

Labelled empty-content region with a heading, description, and optional action. Use it when a view has no records yet or a filter returns no results.

Preview

Usage

import { Button, EmptyState } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';

<EmptyState
  title="No API keys"
  description="Create a key before deploying this application."
  headingLevel={3}
  action={<Button variant="secondary">Create key</Button>}
/>

Props

Prop	Type	Default	Description
`title`	`JSX.Element`	required	Region heading and accessible name.
`description`	`JSX.Element`	required	Supporting text referenced by `aria-describedby`.
`headingLevel`	`2 \| 3 \| 4 \| 5 \| 6`	`2`	Heading level for the title.
`action`	`JSX.Element`	--	Optional action slot, usually one button or link.
`class`	`string`	--	Additional CSS classes.

Accessibility

Region: Renders role="region" with aria-labelledby and aria-describedby.
Heading level: Defaults to h2. Set headingLevel so the empty state fits the surrounding page outline.
Actions: Keep the action slot focused on one clear next step.

Do / Don't

Do

Explain why the area is empty and offer the most likely next action.

Don't

Don't use an empty state for transient loading. Use Skeleton while content is still being fetched.