徽章
用于状态、分类和元数据的行内标签,提供 11 种颜色变体、4 种尺寸、图标、胶囊/圆角形状及描边样式。
使用 <Badge> 组件为内容添加状态指示、分类标签或版本标记。徽章以紧凑的行内元素呈现,可置于正文中,也可在布局中堆叠排列。
基础徽章
默认样式的徽章:
Default<Badge>Default</Badge>
颜色
徽章提供 11 种颜色变体:
GrayBlueGreenYellowOrangeRedPurple
<Badge color="gray">Gray</Badge>
<Badge color="blue">Blue</Badge>
<Badge color="green">Green</Badge>
<Badge color="yellow">Yellow</Badge>
<Badge color="orange">Orange</Badge>
<Badge color="red">Red</Badge>
<Badge color="purple">Purple</Badge>
表面颜色
适用于随页面背景自适应的徽章:
WhiteSurface
<Badge color="white">White</Badge>
<Badge color="surface">Surface</Badge>
危险颜色
适用于警告或错误状态:
White DestructiveSurface Destructive
<Badge color="white-destructive">White Destructive</Badge>
<Badge color="surface-destructive">Surface Destructive</Badge>
带图标
为徽章添加图标:
VerifiedFeaturedNewPending
<Badge icon="circle-check" color="green">Verified</Badge>
<Badge icon="star" color="yellow">Featured</Badge>
<Badge icon="bolt" color="purple">New</Badge>
<Badge icon="clock" color="blue">Pending</Badge>
图标类型
使用 iconType 更改图标样式:
SolidRegularDuotoneGitHub
<Badge icon="star" iconType="solid" color="yellow">Solid</Badge>
<Badge icon="star" iconType="regular" color="yellow">Regular</Badge>
<Badge icon="star" iconType="duotone" color="yellow">Duotone</Badge>
<Badge icon="github" iconType="brands" color="gray">GitHub</Badge>
尺寸
徽章提供四种尺寸:
Extra SmallSmallMediumLarge
<Badge size="xs" color="blue">Extra Small</Badge>
<Badge size="sm" color="blue">Small</Badge>
<Badge size="md" color="blue">Medium</Badge>
<Badge size="lg" color="blue">Large</Badge>
形状
在圆角或胶囊形状之间选择:
RoundedPill
<Badge shape="rounded" color="purple">Rounded</Badge>
<Badge shape="pill" color="purple">Pill</Badge>
描边变体
使用轮廓徽章以获得更轻的视觉重量:
Outlined BlueOutlined GreenOutlined RedOutlined Purple
<Badge stroke color="blue">Outlined Blue</Badge>
<Badge stroke color="green">Outlined Green</Badge>
<Badge stroke color="red">Outlined Red</Badge>
<Badge stroke color="purple">Outlined Purple</Badge>
禁用状态
为非活动徽章降低不透明度:
InactiveDisabled
<Badge disabled color="gray">Inactive</Badge>
<Badge disabled color="blue">Disabled</Badge>
内联用法
徽章与文字同行显示。此功能需要 Premium 订阅。您也可以将项目标记为 New 或 Deprecated。
This feature requires a <Badge color="orange" size="sm">Premium</Badge> subscription.
You can also mark items as <Badge color="green" size="sm">New</Badge> or
<Badge color="red" size="sm">Deprecated</Badge>.
属性
stringdefault: gray颜色变体:gray、blue、green、yellow、orange、red、purple、white、surface、white-destructive、surface-destructive。
stringdefault: md徽章尺寸:xs、sm、md、lg。
stringdefault: rounded徽章形状:rounded、pill。
stringFont Awesome 图标名称。
string图标样式:regular、solid、light、thin、sharp-solid、duotone、brands。
booleandefault: false以透明背景的轮廓徽章显示。
booleandefault: false降低不透明度以表示非活动状态。
string用于自定义样式的附加 CSS 类。
