Badge

徽章用作 UI 元素的小型数值或状态描述符。

Storybook@heroui/badgeSourceStyles source

安装

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

导入

用法

尺寸

颜色

变体

位置

形状

为了获得更好的定位效果，您可以使用 shape 属性来定义徽章的形状。

徽章可见性

您可以使用 isInvisible 属性来控制徽章的可见性。

内容示例

禁用轮廓

默认情况下，徽章带有轮廓，您可以通过使用 showOutline={false} 属性来禁用它。

无障碍性

不建议依赖徽章的内容来获取准确的（屏幕阅读器）播报。 相反，请考虑提供完整的描述，例如使用 aria-label。

插槽

Badge 组件有两个插槽：

  • base: 徽章的基础插槽，即徽章的容器。

  • badge: 徽章内容的主插槽，即徽章的内容。

API

Badge 属性

PropTypeDefault
children
ReactNode
content
string | number | ReactNode
variant
solid | flat | faded | shadow
"solid"
color
default | primary | secondary | success | warning | danger
"default"
size
sm | md | lg
"md"
shape
circle | rectangle
"rectangle"
placement
top-right | top-left | bottom-right | bottom-left
"top-right"
showOutline
boolean
true
disableOutline
boolean
false
disableAnimation
boolean
false
isInvisible
boolean
false
isOneChar
boolean
false
isDot
boolean
false
classNames
Partial<Record<"base"｜"badge", string>>
Avatar 头像Breadcrumbs 面包屑