--- title: 徽章 description: 用于状态、类别和元数据的内联标签，提供 11 种颜色、4 种尺寸、图标、胶囊/圆角形状和描边。 --- > **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version. 使用 `` 组件为内容添加状态指示器、类别标签或版本标记。徽章以紧凑的内联元素呈现，因此可以嵌入连续文本或堆叠在布局中。 ## 基础徽章带有默认样式的简单徽章：默认 ```mdx Default ``` ## 颜色徽章提供 11 种颜色变体，用于传达不同含义：

灰色蓝色绿色黄色橙色红色紫色

```mdx Gray Blue Green Yellow Orange Red Purple ``` ### 表面颜色用于适应页面背景的徽章：

白色表面色

```mdx White Surface ``` ### 危险颜色用于警告或错误状态：

白色危险表面危险

```mdx White Destructive Surface Destructive ``` ## 带图标添加图标，让徽章的含义更加明确：

已验证精选新增待处理

```mdx Verified Featured New Pending ``` ### 图标类型使用 `iconType` 指定不同的图标样式：

实心常规双色 GitHub

```mdx Solid Regular Duotone GitHub ``` ## 尺寸提供四种尺寸，可适应不同场景：

超小小中大

```mdx Extra Small Small Medium Large ``` ## 形状选择圆角或胶囊形状：

圆角胶囊

```mdx Rounded Pill ``` ## 描边变体使用描边徽章实现更轻盈的视觉效果：

蓝色描边绿色描边红色描边紫色描边

```mdx Outlined Blue Outlined Green Outlined Red Outlined Purple ``` ## 禁用状态降低不活跃徽章的不透明度：

不活跃已禁用

```mdx Inactive Disabled ``` ## 内联用法徽章可以与文本内联使用。此功能需要订阅高级版。你也可以将项目标记为新增或已弃用。 ```mdx This feature requires a Premium subscription. You can also mark items as New or Deprecated. ``` ## 属性颜色变体：`gray`、`blue`、`green`、`yellow`、`orange`、`red`、`purple`、`white`、`surface`、`white-destructive`、`surface-destructive`。徽章尺寸：`xs`、`sm`、`md`、`lg`。徽章形状：`rounded`、`pill`。 Font Awesome 图标名称。图标样式：`regular`、`solid`、`light`、`thin`、`sharp-solid`、`duotone`、`brands`。显示为带透明背景的描边徽章。降低不透明度以表示不活跃状态。用于自定义样式的其他 CSS 类。 ## 接下来做什么？浏览所有可用组件了解如何在 MDX 中使用组件