# 徽章 (/zh/components/badge) Related: [折叠面板](/zh/components/accordions.md), [横幅](/zh/components/banner.md), [标注框](/zh/components/callouts.md), [卡片](/zh/components/cards.md), [代码分组](/zh/components/code-groups.md), [颜色](/zh/components/color.md) 使用徽章显示状态指示器、标签或 metadata。将徽章内嵌于文本中，或作为独立元素使用。

## 基本徽章 [#基本徽章]

徽章 ```mdx 徽章 ```

## 颜色 [#颜色]

徽章支持多种颜色变体，用于表达不同含义。徽章徽章徽章徽章徽章徽章徽章徽章徽章徽章徽章 ```mdx <徽章 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 <徽章 size="xs">徽章 <徽章 size="sm">徽章 <徽章 size="md">徽章 <徽章 size="lg">徽章 ```

## 形状 [#形状]

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

## 图标 [#图标]

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

## 线框样式 [#线框样式]

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

## 禁用状态 [#禁用状态]

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

## 内联用法 [#内联用法]

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

## 组合属性 [#组合属性]

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

## 属性 [#属性]

徽章的颜色变体。选项：`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 类名。