Badge
Badgeは、アイテムのステータスを強調表示して、すぐに認識できるようにするコンポーネントです。
インポート
import { Badge } from "@yamada-ui/react"
使い方
編集可能な例
<Badge>New</Badge>
バリアントを変更する
編集可能な例
<Wrap gap="md"> <For each={[ { variant: "subtle", colorScheme: "primary" }, { variant: "solid", colorScheme: "secondary" }, { variant: "outline", colorScheme: "success" }, ]} > {({ variant, colorScheme }, index) => ( <Badge key={index} variant={variant} colorScheme={colorScheme}> {colorScheme} </Badge> )} </For> </Wrap>
カラースキーマを変更する
編集可能な例
<VStack> <Wrap gap="md"> <For each={[ "primary", "secondary", "success", "warning", "danger", "link", "gray", "neutral", "red", "rose", "pink", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", ]} > {(colorScheme, index) => ( <Badge key={index} variant="subtle" colorScheme={colorScheme}> {colorScheme} </Badge> )} </For> </Wrap> <Wrap gap="md"> <For each={[ "primary", "secondary", "success", "warning", "danger", "link", "gray", "neutral", "red", "rose", "pink", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", ]} > {(colorScheme, index) => ( <Badge key={index} variant="solid" colorScheme={colorScheme}> {colorScheme} </Badge> )} </For> </Wrap> <Wrap gap="md"> <For each={[ "primary", "secondary", "success", "warning", "danger", "link", "gray", "neutral", "red", "rose", "pink", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", ]} > {(colorScheme, index) => ( <Badge key={index} variant="outline" colorScheme={colorScheme}> {colorScheme} </Badge> )} </For> </Wrap> </VStack>
GitHubでこのページを編集する