---
title: "Add a badge UI component to your Editor"
description: "Integrate a small visual indicator into your Tiptap Editor to highlight status, counts or categories. More in the docs."
canonical_url: "https://tiptap.dev/docs/ui-components/primitives/badge"
---

# Add a badge UI component to your Editor

Integrate a small visual indicator into your Tiptap Editor to highlight status, counts or categories. More in the docs.

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

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

## Install

You can add the primitive via Tiptap CLI

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

## Usage

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

## Props

### Badge

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