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

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

安装

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

npx @tiptap/cli@latest add badge

手动集成

对于 Vite 或 Next.js 以外的框架，请从开源仓库手动添加该组件。

导入样式

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

使用方法

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'）

Previously头像

Next up按钮