Badge

Badge 表示状态或类别的短文本。

Usage

Badge

Badge

Extra SmallSmallMediumLarge

Extra SmallSmallMediumLargeFullNone

BlueCyanGrayOrangeRedGreenPinkPurpleYellow

SolidOutlinedFadedSubtle

添加 closable 属性，可以在 Badge 上显示一个关闭按钮。 onClose 回调函数会在关闭按钮被点击时触发。

Badge

GithubGithub

AppleBananaCherryWatermelonOrange

Badge 继承 as (默认为 'span') 的 Props。

Prop	Type	Default	Description
children	ReactNode	-	Badge 的内容。
color	'blue'\|'orange'\|'yellow'\|'cyan'\|'red'\|'green'\|'pink'\|'purple'\|'gray'	'blue'	Badge 的颜色。
variant	'solid'\|'outlined'\|'subtle'\|'faded'	'solid'	Badge 的外观样式。
size	'xs'\|'sm'\|'md'\|'lg'	'md'	Badge 的大小。
radius	'xs'\|'sm'\|'md'\|'lg'\|'full'\|'none'	size	Badge 的 BorderRadius。
disabled	boolean	false	Badge 是否禁用。
closable	boolean	false	是否显示关闭按钮。
onClose	(event: React.MouseEvent<HTMLButtonElement>) => void	-	关闭按钮被点击时触发的回调函数。
startIcon	ReactNode	-	放置在子元素之前的元素。
endIcon	ReactNode	-	放置在子元素之后的元素。
className	ClassValue	-	用于根元素的 className。
ref	Ref	-	用于转发根元素。
as	ElementType	'span'	用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
sx	Interpolation	-	用于根元素的 sx 属性。
classNames	Partial<Record<Slots, ClassValue>>	-	Badge Slots 的 className。
slotProps	Partial<Record<Slots, ComponentProps>>	-	Badge Slots 的 props。

Slot Name	Class Name	Default Component	Description
closeButton	.nui-badge-close-button	'span'	Badge 的关闭按钮。
startIcon	.nui-badge-start-icon	'span'	Badge 内开头图标的容器。
endIcon	.nui-badge-end-icon	'span'	Badge 内结尾图标的容器。