使用精美组件更快地交付
NextUI Pro

徽章

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

Storybook@nextui-org/badge源码样式源码

安装

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

导入

用法

尺寸

颜色

变体

位置

形状

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

徽章可见性

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

内容示例

禁用轮廓

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

可访问性

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

插槽

徽章组件有两个插槽

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

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

API

徽章属性

属性类型默认值
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>>
头像面包屑