DefaultSuccessRemovedNew
import { Badge, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack direction="row">
<Badge>Default</Badge>
<Badge colorPalette="green">Success</Badge>
<Badge colorPalette="red">Removed</Badge>
<Badge colorPalette="purple">New</Badge>
</Stack>
)
}
用法
¥Usage
import { Badge } from "@chakra-ui/react"<Badge>Badge</Badge>示例
¥Examples
图标
¥Icon
直接在徽章内渲染图标
¥Render an icon within the badge directly
NewNew
import { Badge, Stack } from "@chakra-ui/react"
import { HiAtSymbol, HiStar } from "react-icons/hi"
const Demo = () => {
return (
<Stack align="flex-start">
<Badge variant="solid" colorPalette="blue">
<HiStar />
New
</Badge>
<Badge variant="solid" colorPalette="green">
New
<HiAtSymbol />
</Badge>
</Stack>
)
}
变量
¥Variants
徽章有不同的变体
¥Badges come in different variants
OutlineSolidSubtleSurface
import { Badge, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack direction="row">
<Badge variant="outline">Outline</Badge>
<Badge variant="solid">Solid</Badge>
<Badge variant="subtle">Subtle</Badge>
<Badge variant="surface">Surface</Badge>
</Stack>
)
}
尺寸
¥Sizes
徽章有不同的尺寸
¥Badges come in different sizes
NewNewNewNew
import { Badge, HStack } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack>
<Badge size="xs">New</Badge>
<Badge size="sm">New</Badge>
<Badge size="md">New</Badge>
<Badge size="lg">New</Badge>
</HStack>
)
}
属性
¥Props
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
variant | 'subtle' | 'solid' | 'subtle' | 'outline' | 'surface' | 'plain'The variant of the component |
size | 'sm' | 'xs' | 'sm' | 'md' | 'lg'The size of the component |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |