EmptyState

EmptyState is a component used to display when a resource is empty or unavailable.

Your cart is empty

Explore our products and add items to your cart

<EmptyState.Root
  description="Explore our products and add items to your cart"
  indicator={<ShoppingCartIcon />}
  title="Your cart is empty"
/>

Usage

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

import { EmptyState } from "@/components/ui"

import { EmptyState } from "@workspaces/ui"

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

Change Size

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

<VStack>
  <For each={["sm", "md", "lg"]}>
    {(size, index) => (
      <EmptyState.Root
        key={index}
        size={size}
        description="Explore our products and add items to your cart"
        indicator={<ShoppingCartIcon />}
        title="Your cart is empty"
      />
    )}
  </For>
</VStack>

Add Children

Your cart is empty

Explore our products and add items to your cart

<EmptyState.Root
  description="Explore our products and add items to your cart"
  indicator={<ShoppingCartIcon />}
  title="Your cart is empty"
>
  <Button>Back to home</Button>
</EmptyState.Root>

Custom

Your cart is empty

Explore our products and add items to your cart

<EmptyState.Root>
  <EmptyState.Indicator>
    <ShoppingCartIcon />
  </EmptyState.Indicator>

  <EmptyState.Title>Your cart is empty</EmptyState.Title>

  <EmptyState.Description>
    Explore our products and add items to your cart
  </EmptyState.Description>
</EmptyState.Root>

Props

EmptyState.Root

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"lg" \| "md" \| "sm"` The size of the component.
`contentProps`	-	`EmptyStateContentProps` The props for the empty state content component.
`description`	-	`ReactNode` The empty state description to use.
`descriptionProps`	-	`EmptyStateDescriptionProps` The props for the empty state description component.
`indicator`	-	`ReactNode` The empty state indicator to use.
`indicatorProps`	-	`EmptyStateIndicatorProps` The props for the empty state indicator component.
`title`	-	`ReactNode` The empty state title to use.
`titleProps`	-	`EmptyStateTitleProps` The props for the empty state title component.

EmptyState.Content

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

EmptyState.Description

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

EmptyState.Indicator

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

EmptyState.Title

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Similar Components

Alert is a component that conveys information to the user.

CircleProgress is a component that displays progress in a circular progress bar.

Progress is a component for visually indicating progress.

Skeleton is a component that acts as a placeholder until content is loaded.

Snacks is a component for controlling notifications used in forms and other similar situations.

Status is component that indicate the status of a process or state.

Tip is a component that displays supplementary information with a built-in icon trigger.