Add a badge UI component to your Editor

A small visual indicator, typically used to highlight status, counts, or categories.

Install

You can add the primitive via Tiptap CLI

npx @tiptap/cli@latest add badge

Usage

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">Resolved</span>
    </Badge>
  )
}

Props

Badge

Name	Type	Default	Description
data-style	string	undefined	Style variant (e.g., 'gray', 'primary')