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>