Empty State

Used to indicate when a resource is empty or unavailable.

Your cart is empty

Explore our products and add items to your cart

Usage

import { EmptyState } from "chakra-ui-solid";

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

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.

Your cart is empty

Explore our products and add items to your cart

Your cart is empty

Explore our products and add items to your cart

Your cart is empty

Explore our products and add items to your cart

Action

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

Start adding tokens

Add a new design token to get started

List

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

No results found

Try adjusting your search

Try removing filters
Try different keywords

Closed Component

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

Your cart is empty

Explore our products and add items to your cart

Props

Root

EmptyStateRootProps
Prop	Default	Type
`size`	`'md'`	`ConditionalValue<'sm' \| 'md' \| 'lg' \| PresetVariant<'emptyState', 'size'>>` The padding around the block, the gap between its parts, the title's type scale, and the glyph's — all four move together, and the glyph moves furthest: `2xl` to `6xl`.

Plus HTMLChakraProps<"div"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.