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 badgeUsage
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') |