---
title: "将徽章 UI 组件添加到你的编辑器"
description: "在你的 Tiptap 编辑器中集成一个小型视觉指示器，以突出显示状态、计数或类别。更多信息请参见文档。"
canonical_url: "https://tiptap.zhcndoc.com/ui-components/primitives/badge"
---

# 将徽章 UI 组件添加到你的编辑器

在你的 Tiptap 编辑器中集成一个小型视觉指示器，以突出显示状态、计数或类别。更多信息请参见文档。

一个小型视觉指示器，通常用于突出显示状态、计数或类别。

> **Interactive demo:** [badge](https://template.tiptap.dev/preview/tiptap-ui-primitive/badge)

## 安装

你可以通过 Tiptap CLI 添加该组件

```bash
npx @tiptap/cli@latest add badge
```

### 手动集成

对于 Vite 或 Next.js 以外的框架，请从 [开源仓库](https://github.com/ueberdosis/tiptap-ui-components) 手动添加该组件。

### 导入样式

此组件要求你导入我们添加到 `styles/keyframe-animation.scss` 和 `styles/_variables.scss` 的样式。

## 使用方法

```tsx
import { Badge } from '@/components/tiptap-ui-primitive/badge'
import { CheckIcon } from '@/components/icons/check-icon'

export default function MyComponent() {
  return (
    <Badge data-style="gray">
      <CheckIcon className="tiptap-badge-icon" />
      <span className="tiptap-badge-text">已解决</span>
    </Badge>
  )
}
```

## 属性

### Badge

| 名称         | 类型     | 默认值       | 描述                         |
| ---------- | ------ | --------- | -------------------------- |
| data-style | string | undefined | 风格变体（例如：'gray', 'primary'） |