> ## Documentation Index > Fetch the complete documentation index at: https://mintlify-docs-automation-github-pr-review.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # 徽章 > 使用徽章组件高亮显示状态指示器、版本标签或内联元数据，支持自定义颜色和悬停提示。使用徽章显示状态指示器、标签或 metadata。将徽章内嵌于文本中，或作为独立元素使用。

## 基本徽章

徽章 ```mdx theme={null} 徽章 ```

## 颜色

徽章支持多种颜色变体，用于表达不同含义。徽章徽章徽章徽章徽章徽章徽章徽章徽章徽章徽章 ```mdx theme={null} <徽章 color="gray">徽章 <徽章 color="blue">徽章 <徽章 color="green">徽章 <徽章 color="yellow">徽章 <徽章 color="orange">徽章 <徽章 color="red">徽章 <徽章 color="purple">徽章 <徽章 color="white">徽章 <徽章 color="surface">徽章 <徽章 color="white-destructive">徽章 <徽章 color="surface-destructive">徽章 ```

## 尺寸

徽章提供四种尺寸，以匹配你的内容层级。徽章徽章徽章徽章 ```mdx theme={null} <徽章 size="xs">徽章 <徽章 size="sm">徽章 <徽章 size="md">徽章 <徽章 size="lg">徽章 ```

## 形状

可选择圆角或胶囊形徽章。徽章徽章 ```mdx theme={null} <徽章 shape="rounded">徽章 <徽章 shape="pill">徽章 ```

## 图标

为徽章添加图标，以提供更多上下文信息。徽章徽章徽章 ```mdx theme={null} <徽章 icon="circle-check" color="green">徽章 <徽章 icon="clock" color="orange">徽章 <徽章 icon="ban" color="red">徽章 ```

## 线框样式

使用线框样式，以获得更为低调的外观。标记标记标记标记 ```mdx theme={null} <徽章 stroke color="blue">徽章 <徽章 stroke color="green">徽章 <徽章 stroke color="orange">徽章 <徽章 stroke color="red">徽章 ```

## 禁用状态

将徽章设置为禁用，以表示处于非活动或不可用状态。徽章徽章 ```mdx theme={null} <徽章 disabled icon="lock" color="gray">徽章 <徽章 disabled icon="lock" color="blue">徽章 ```

## 内联用法

徽章可以自然地嵌入文本内容中。比如，此功能需要 Premium 订阅，或者此 API 端点返回 JSON 格式。 ```mdx theme={null} 此功能需要高级版订阅。 ```

## 组合属性

组合多个属性来自定义徽章样式。高级已验证测试版 ```mdx theme={null} 高级版已验证测试版 ```

## 属性

徽章的颜色变体。选项：`gray`、`blue`、`green`、`yellow`、`orange`、`red`、 `purple`、`white`、`surface`、`white-destructive`、`surface-destructive`。徽章的尺寸。选项：`xs`、`sm`、`md`、`lg`。徽章的形状。选项：`rounded`、`pill`。要显示的图标。可选值： * [Font Awesome](https://fontawesome.com/icons) 图标名称 (如果你在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `fontawesome`) * [Lucide](https://lucide.dev/icons) 图标名称 (如果你在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `lucide`) * [Tabler](https://tabler.io/icons) 图标名称 (如果你在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `tabler`) * 指向外部托管图标的 URL * 项目中图标文件的路径 * 用花括号包裹的 SVG 代码对于自定义 SVG 图标： 1. 使用 [SVGR 转换器](https://react-svgr.com/playground/) 转换你的 SVG。 2. 将 SVG 代码粘贴到 SVG 输入框。 3. 从 JSX 输出框中复制完整的 `` 元素。 4. 用花括号包裹可用于 JSX 的 SVG 代码：`icon={}`。 5. 根据需要调整 `height` 和 `width`。 [Font Awesome](https://fontawesome.com/icons) 的图标样式。仅在使用 Font Awesome 图标时生效。可选值：`regular`、`solid`、`light`、`thin`、`sharp-solid`、`duotone`、`brands`。以描边而非实心背景的样式显示徽章。以禁用状态显示徽章，降低不透明度。应用于徽章的其他 CSS 类名。