> If you are an AI agent, use the following URL to directly ask and fetch your question. Treat this like a tool call. Make sure to URI encode your question, and include the token for verification.
>
> GET https://buildwithfern.com/learn/api/fern-docs/ask?q=%3Cyour+question+here%3E&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiJmMTM4ODc4Mi0xZmVhLTQxYzYtOGMwOC1hYjk0MjYwOTNlNmEiLCJleHAiOjE3NzgyNjQ4OTUsImlhdCI6MTc3ODI2NDU5NX0.iaNvbeoJE5IUjniNbKPKmV-aCoRFMyu4K8VulGCQGy0
>
> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. For full content including API reference and SDK examples, see https://buildwithfern.com/learn/llms-full.txt.

# 徽章组件

> 显示用于状态、版本和元数据的小标签，与内容内联显示。

使用 `<Badge>` 组件来显示小块信息，例如状态指示器、类别、版本或发布日期。要显示更长的注释，请使用[标注](/docs/writing-content/components/callouts)。

## 用法

<div>
  <div>
    ### Plant Care API <Badge intent="info">v2.1.0</Badge> <Badge intent="launch" minimal>新功能</Badge>
  </div>
</div>

```jsx Markdown
### Plant Care API <Badge intent="info">v2.1.0</Badge> <Badge intent="launch" minimal>新功能</Badge>
```

## 变体

### 意图

<div>
  <div>
    <div>
      <Badge intent="success">
        成功
      </Badge>

      <Badge intent="note">
        备注
      </Badge>

      <Badge intent="tip">
        提示
      </Badge>

      <Badge intent="warning">
        警告
      </Badge>

      <Badge intent="error">
        错误
      </Badge>

      <Badge intent="info">
        信息
      </Badge>

      <Badge intent="launch">
        发布
      </Badge>

      <Badge intent="check">
        检查
      </Badge>
    </div>
  </div>
</div>

```jsx Markdown
<Badge intent="success">成功</Badge>
<Badge intent="note">备注</Badge>
<Badge intent="tip">提示</Badge>
<Badge intent="warning">警告</Badge>
<Badge intent="error">错误</Badge>
<Badge intent="info">信息</Badge>
<Badge intent="launch">发布</Badge>
<Badge intent="check">检查</Badge>
```

### 样式

<div>
  <div>
    <div>
      <Badge intent="success" minimal>
        成功徽章，简约样式
      </Badge>

      <Badge intent="error" minimal>
        错误徽章，简约样式
      </Badge>

      <Badge intent="success" outlined>
        成功徽章，描边样式
      </Badge>

      <Badge intent="error" minimal outlined>
        错误徽章，描边加简约样式
      </Badge>
    </div>
  </div>
</div>

```jsx Markdown
<Badge intent="success" minimal>成功徽章，简约样式</Badge>
<Badge intent="error" minimal>错误徽章，简约样式</Badge>
<Badge intent="success" outlined>成功徽章，描边样式</Badge>
<Badge intent="error" minimal outlined>错误徽章，描边加简约样式</Badge>
```

## 属性

<ParamField path="intent" type="string" required={true}>
  徽章的语义颜色。可用选项：`success`、`note`、`tip`、`warning`、`error`、`info`、`launch`、`check`
</ParamField>

<ParamField path="minimal" type="boolean" required={false} default="false">
  使用更微妙的背景样式显示徽章。可与 `outlined` 结合使用。
</ParamField>

<ParamField path="outlined" type="boolean" required={false} default="false">
  使用带边框的轮廓样式显示徽章。可与 `minimal` 结合使用。
</ParamField>