EmptyState

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

Import

import {
  EmptyState,
  EmptyStateIndicator,
  EmptyStateTitle,
  EmptyStateDescription,
} from "@yamada-ui/react"

Copied!

EmptyState: A wrapper component to display child elements.
EmptyStateIndicator: A component to display the icon for the section.
EmptyStateTitle: A component to display the title for the section.
EmptyStateDescription: A component to display the description for the section.

EmptyStateIndicator, EmptyStateTitle, and EmptyStateDescription can be omitted.

Usage

Editable example

<EmptyState>
  <EmptyStateIndicator>
    <ShoppingCartIcon />
  </EmptyStateIndicator>

  <EmptyStateTitle>Your cart is empty</EmptyStateTitle>

  <EmptyStateDescription>
    Explore our products and add items to your cart
  </EmptyStateDescription>
</EmptyState>

Copied!

Alternatively, you can also omit child elements by using title, indicator, description.

Editable example

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

Copied!

Change Size

Editable example

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

Copied!

Add Children

Editable example

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

Copied!

Edit this page on GitHub

PreviousFor NextPortal