mintlify__docs/zh/components/badge.mdx

---
title: "徽章"
description: "使用徽章组件高亮显示状态指示器、版本标签或内联元数据，支持自定义颜色和悬停提示。"
keywords: ["badge", "label", "tag", "status", "indicator"]
boost: 3
---

import IconsOptional from "/snippets/zh/icons-optional.mdx";

使用徽章显示状态指示器、标签或 metadata。将徽章内嵌于文本中，或作为独立元素使用。


<div id="basic-badge">
  ## 基本徽章
</div>

<Badge>徽章</Badge>

```mdx
<Badge>徽章</Badge>
```

<div id="colors">
  ## 颜色
</div>

徽章支持多种颜色变体，用于表达不同含义。

<Badge color="gray">徽章</Badge>
<Badge color="blue">徽章</Badge>
<Badge color="green">徽章</Badge>
<Badge color="yellow">徽章</Badge>
<Badge color="orange">徽章</Badge>
<Badge color="red">徽章</Badge>
<Badge color="purple">徽章</Badge>
<Badge color="white">徽章</Badge>
<Badge color="surface">徽章</Badge>
<Badge color="white-destructive">徽章</Badge>
<Badge color="surface-destructive">徽章</Badge>

```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">徽章</徽章>
```


<div id="sizes">
  ## 尺寸
</div>

徽章提供四种尺寸，以匹配你的内容层级。

<Badge size="xs">徽章</Badge>
<Badge size="sm">徽章</Badge>
<Badge size="md">徽章</Badge>
<Badge size="lg">徽章</Badge>

```mdx
<徽章 size="xs">徽章</徽章>
<徽章 size="sm">徽章</徽章>
<徽章 size="md">徽章</徽章>
<徽章 size="lg">徽章</徽章>
```

<div id="shapes">
  ## 形状
</div>

可选择圆角或胶囊形徽章。

<Badge shape="rounded">徽章</Badge>
<Badge shape="pill">徽章</Badge>

```mdx
<徽章 shape="rounded">徽章</徽章>
<徽章 shape="pill">徽章</徽章>
```

<div id="icons">
  ## 图标
</div>

为徽章添加图标，以提供更多上下文信息。

<Badge icon="circle-check" color="green">徽章</Badge>
<Badge icon="clock" color="orange">徽章</Badge>
<Badge icon="ban" color="red">徽章</Badge>

```mdx
<徽章 icon="circle-check" color="green">徽章</徽章>
<徽章 icon="clock" color="orange">徽章</徽章>
<徽章 icon="ban" color="red">徽章</徽章>
```

<div id="stroke-variant">
  ## 线框样式
</div>

使用线框样式，以获得更为低调的外观。

<Badge stroke color="blue">标记</Badge>
<Badge stroke color="green">标记</Badge>
<Badge stroke color="orange">标记</Badge>
<Badge stroke color="red">标记</Badge>

```mdx
<徽章 stroke color="blue">徽章</徽章>
<徽章 stroke color="green">徽章</徽章>
<徽章 stroke color="orange">徽章</徽章>
<徽章 stroke color="red">徽章</徽章>
```

<div id="disabled-state">
  ## 禁用状态
</div>

将徽章设置为禁用，以表示处于非活动或不可用状态。

<Badge disabled icon="lock" color="gray">徽章</Badge>
<Badge disabled icon="lock" color="blue">徽章</Badge>

```mdx
<徽章 disabled icon="lock" color="gray">徽章</徽章>
<徽章 disabled icon="lock" color="blue">徽章</徽章>
```

<div id="inline-usage">
  ## 内联用法
</div>

徽章可以自然地嵌入文本内容中。比如，此功能需要 <Badge color="orange" size="sm">Premium</Badge> 订阅，或者此 API 端点返回 <Badge color="green" size="sm">JSON</Badge> 格式。

```mdx
此功能需要<Badge color="orange" size="sm">高级版</Badge>订阅。
```

<div id="combined-properties">
  ## 组合属性
</div>

组合多个属性来自定义徽章样式。

<Badge icon="star" color="blue" size="lg" shape="pill">高级</Badge>
<Badge icon="check" stroke color="green" size="sm">已验证</Badge>
<Badge icon="badge-alert" color="orange" shape="rounded">测试版</Badge>

```mdx
<Badge icon="star" color="blue" size="lg" shape="pill">高级版</Badge>
<Badge icon="check" stroke color="green" size="sm">已验证</Badge>
<Badge icon="badge-alert" color="orange" shape="rounded">测试版</Badge>
```

<div id="properties">
  ## 属性
</div>

<ResponseField name="color" type="string" default="gray">
  徽章的颜色变体。
  
  选项：`gray`、`blue`、`green`、`yellow`、`orange`、`red`、
  `purple`、`white`、`surface`、`white-destructive`、`surface-destructive`。
</ResponseField>

<ResponseField name="size" type="string" default="md">
  徽章的尺寸。
  
  选项：`xs`、`sm`、`md`、`lg`。
</ResponseField>

<ResponseField name="shape" type="string" default="rounded">
  徽章的形状。
  
  选项：`rounded`、`pill`。
</ResponseField>

<IconsOptional />

<ResponseField name="stroke" type="boolean" default="false">
  以描边而非实心背景的样式显示徽章。
</ResponseField>

<ResponseField name="disabled" type="boolean" default="false">
  以禁用状态显示徽章，降低不透明度。
</ResponseField>

<ResponseField name="className" type="string">
  应用于徽章的其他 CSS 类名。
</ResponseField>