Jamdesk Documentation logo

徽章

用于状态、类别和元数据的内联标签,提供 11 种颜色、4 种尺寸、图标、胶囊/圆角形状和描边。

使用 <Badge> 组件为内容添加状态指示器、类别标签或版本标记。徽章以紧凑的内联元素呈现,因此可以嵌入连续文本或堆叠在布局中。

基础徽章

带有默认样式的简单徽章:

默认
<Badge>Default</Badge>

颜色

徽章提供 11 种颜色变体,用于传达不同含义:

灰色蓝色绿色黄色橙色红色紫色
<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>

表面颜色

用于适应页面背景的徽章:

白色表面色
<Badge color="white">White</Badge>
<Badge color="surface">Surface</Badge>

危险颜色

用于警告或错误状态:

白色危险表面危险
<Badge color="white-destructive">White Destructive</Badge>
<Badge color="surface-destructive">Surface Destructive</Badge>

带图标

添加图标,让徽章的含义更加明确:

已验证精选新增待处理
<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 指定不同的图标样式:

实心常规双色GitHub
<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>

尺寸

提供四种尺寸,可适应不同场景:

超小
<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>

形状

选择圆角或胶囊形状:

圆角胶囊
<Badge shape="rounded" color="purple">Rounded</Badge>
<Badge shape="pill" color="purple">Pill</Badge>

描边变体

使用描边徽章实现更轻盈的视觉效果:

蓝色描边绿色描边红色描边紫色描边
<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>

禁用状态

降低不活跃徽章的不透明度:

不活跃已禁用
<Badge disabled color="gray">Inactive</Badge>
<Badge disabled color="blue">Disabled</Badge>

内联用法

徽章可以与文本内联使用。此功能需要订阅高级版。你也可以将项目标记为新增已弃用

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

颜色变体:graybluegreenyelloworangeredpurplewhitesurfacewhite-destructivesurface-destructive

stringdefault: md

徽章尺寸:xssmmdlg

stringdefault: rounded

徽章形状:roundedpill

string

Font Awesome 图标名称。

string

图标样式:regularsolidlightthinsharp-solidduotonebrands

booleandefault: false

显示为带透明背景的描边徽章。

booleandefault: false

降低不透明度以表示不活跃状态。

string

用于自定义样式的其他 CSS 类。

接下来做什么?

组件概览

浏览所有可用组件

MDX 基础

了解如何在 MDX 中使用组件