---
title: 徽章
author: pengzhanbo
icon: iconamoon:badge-light
createTime: 2024/08/18 22:45:50
permalink: /guide/components/badge/
---

## 概述 <Badge type="tip" text="badge" />

使用 `<Badge>` 组件来显示 行内信息，如状态或标签。

将你想显示的内容传递给 `<Badge>` 组件的 `text` 属性。

## Props

| 名称 | 类型                                       | 默认值  | 说明 |
| ---- | ------------------------------------------ | ------- | ---- |
| type | `'info' \| 'tip' \| 'warning' \| 'danger'` | `'tip'` | 类型 |
| text | `string`                                   | `''`    | 文本 |

## 示例

**输入：**

```md :no-line-numbers
- VuePress - <Badge type="info" text="v2" />
- VuePress - <Badge type="tip" text="v2" />
- VuePress - <Badge type="warning" text="v2" />
- VuePress - <Badge type="danger" text="v2" />
```

**输出：**

- VuePress - <Badge type="info" text="v2" />
- VuePress - <Badge type="tip" text="v2" />
- VuePress - <Badge type="warning" text="v2" />
- VuePress - <Badge type="danger" text="v2" />