使用精美組件更快交付產品
NextUI Pro

徽章

徽章用於 UI 元素的小數值或狀態描述。

Storybook@nextui-org/badge原始碼樣式來源

安裝

上述命令僅適用於單獨安裝。如果 @nextui-org/react 已全域安裝，您可以跳過此步驟。

匯入

用法

尺寸

顏色

變體

位置

形狀

為了更好的定位，您可以使用 shape 屬性來定義徽章的形狀。

徽章可見性

您可以使用 isInvisible 屬性來控制徽章的可見性。

內容範例

停用外框

預設情況下，徽章會有一個外框，您可以使用 showOutline={false} 屬性來停用它。

輔助功能

不建議依賴徽章的內容來進行精確的宣告。相反地，請考慮提供全面的描述，例如使用 aria-label。

插槽

Badge 元件有兩個插槽

  • 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>>
頭像麵包屑