使用精美组件更快地交付
HeroUI 专业版

徽标

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

Storybook@heroui/badge源码样式源码

安装

以上命令仅用于单独安装。如果已全局安装 @heroui/react 已全局安装，则可以跳过此步骤。

导入

用法

尺寸

颜色

变体

位置

形状

为了更好的定位，您可以使用shape 属性来定义徽标的形状。

徽标可见性

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

内容示例

禁用轮廓

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

无障碍性

不建议依赖徽标的内容进行准确的播报。相反，请考虑提供全面的描述，例如使用aria-label。

插槽

Badge 组件有两个插槽

  • base：徽标的基础插槽，是徽标的容器。

  • badge：徽标内容的主要插槽，是徽标的内容。

API

Badge 属性

属性类型默认值
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>>
AvatarBreadcrumbs