> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.another-horizon.eu/llms.txt
> Use this file to discover all available pages before exploring further.
# 徽章
> 使用徽章在行内或独立使用时突出显示状态、标签或metadata。
使用徽章显示状态指示器、标签或 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`。
要显示的 icon。
选项：
* [Font Awesome icon](https://fontawesome.com/icons) 名称
* [Lucide icon](https://lucide.dev/icons) 名称
* 用花括号包裹的 JSX 兼容 SVG 代码
* 指向外部托管 icon 的 URL
* 项目中 icon 文件的路径
针对自定义 SVG icon：
1. 使用 [SVGR 转换器](https://react-svgr.com/playground/)将你的 SVG 转换为 JSX。
2. 将 SVG 代码粘贴到 SVG 输入框。
3. 从 JSX 输出框中复制完整的 `... ` 元素。
4. 用花括号包裹 JSX 兼容的 SVG 代码：`icon={ ... }`。
5. 按需调整 `height` 和 `width`。
[Font Awesome](https://fontawesome.com/icons) icon 的样式。仅在使用 Font Awesome icon 时生效。
选项：`regular`、`solid`、`light`、`thin`、`sharp-solid`、`duotone`、`brands`。
以描边而非实心背景的样式显示徽章。
以禁用状态显示徽章，降低不透明度。
应用于徽章的其他 CSS 类名。