Badge
Badgeは、アイテムのステータスを強調表示して、すぐに認識できるようにするコンポーネントです。
Badge
<Badge>Badge</Badge>
使い方
import { Badge } from "@yamada-ui/react"
import { Badge } from "@/components/ui"
import { Badge } from "@workspaces/ui"
<Badge />
バリアントを変更する
solidsubtlesurfaceoutline
<Wrap gap="md">
<For each={["solid", "subtle", "surface", "outline"]}>
{(variant, index) => (
<Badge key={index} variant={variant}>
{variant}
</Badge>
)}
</For>
</Wrap>
サイズを変更する
smmdlg
<Wrap gap="md">
<For each={["sm", "md", "lg"]}>
{(size, index) => (
<Badge key={index} size={size}>
{size}
</Badge>
)}
</For>
</Wrap>
カラースキームを変更する
successwarning
<Wrap gap="md">
<For each={["success", "warning"]}>
{(colorScheme, index) => (
<Badge key={index} colorScheme={colorScheme}>
{colorScheme}
</Badge>
)}
</For>
</Wrap>