Badge
Badge is a component that emphasizes the status of an item to make it immediately recognizable.
Badge
<Badge>Badge</Badge>
Usage
import { Badge } from "@yamada-ui/react"
import { Badge } from "@/components/ui"
import { Badge } from "@workspaces/ui"
<Badge />
Change Variant
solidsubtlesurfaceoutline
<Wrap gap="md">
<For each={["solid", "subtle", "surface", "outline"]}>
{(variant, index) => (
<Badge key={index} variant={variant}>
{variant}
</Badge>
)}
</For>
</Wrap>
Change Size
smmdlg
<Wrap gap="md">
<For each={["sm", "md", "lg"]}>
{(size, index) => (
<Badge key={index} size={size}>
{size}
</Badge>
)}
</For>
</Wrap>
Change Color Scheme
successwarning
<Wrap gap="md">
<For each={["success", "warning"]}>
{(colorScheme, index) => (
<Badge key={index} colorScheme={colorScheme}>
{colorScheme}
</Badge>
)}
</For>
</Wrap>