EmptyState
EmptyStateはリソースが空または利用できない場合に表示するために使用されるコンポーネントです。
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"
/>
使い方
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>
サイズを変更する
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>
子要素を追加する
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>
カスタマイズする
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>