Empty State

Usage

import { EmptyState } from "@chakra-ui/react"

<EmptyState.Root>
  <EmptyState.Content>
    <EmptyState.Indicator />
    <EmptyState.Title />
    <EmptyState.Description />
  </EmptyState.Content>
</EmptyState.Root>

:::info

If you prefer a closed component composition, check out the snippet below.

:::

Examples

Sizes

Use the size prop to set the size of the Empty state.

Action

Here's an example of an empty state with an action button.

List

Here's an example of an empty state with a list.

Closed Component

Here's how to setup the Empty State for a closed component composition.

If you want to automatically add the closed component to your project, run the command:

npx @chakra-ui/cli snippet add empty-state

Props

Root

Explorer

Explore the Empty State component parts interactively. Click on parts in the sidebar to highlight them in the preview.