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 (for Vite or Next.js)

npx @tiptap/cli add badge

Manual Integration

For frameworks other than Vite or Next.js, add the primitive manually from the open-source repository.

Import styles

This component requires you to import our styles which were added to styles/keyframe-animation.scss and styles/_variables.scss.

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