---
title: "Badge"
type: component
version: "2.0.4"
doc_version: "2.0.4"
status: stable
date: 2026-03-11
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Badge with solid, soft, outline, and ghost styles. Multiple sizes and semantic color variants for labels, statuses, and notification counts."
url: https://frutjam.com/components/badge
---

# Badge Component

 Badge components are small, compact labels used to highlight, categorize, or display status information. Built with semantic HTML and Tailwind CSS, badges support multiple sizes, colors, and styles for flexible integration into tables, cards, user profiles, and notification systems. Lightweight and accessible, badges enhance information hierarchy without adding visual clutter.

| Class           | Type  | Description                                         |
| --------------- | ----- | --------------------------------------------------- |
| badge           | Base  | Small inline label                                  |
| badge-outline   | Style | Transparent fill with colored border                |
| badge-soft      | Style | Muted tinted background                             |
| badge-ghost     | Style | Subtle background with no border                    |
| badge-dashed    | Style | Dashed border style                                 |
| badge-pill      | Style | Fully rounded pill shape                            |
| badge-rounded   | Style | Moderate rounding                                   |
| badge-circle    | Style | Equal-width circle for single characters or numbers |
| badge-square    | Style | Square with no rounding                             |
| badge-xs        | Size  | Extra small                                         |
| badge-sm        | Size  | Small                                               |
| badge-md        | Size  | Medium (default)                                    |
| badge-lg        | Size  | Large                                               |
| badge-xl        | Size  | Extra large                                         |
| badge-2xl       | Size  | 2× extra large                                      |
| badge-primary   | Color | Primary theme color                                 |
| badge-secondary | Color | Secondary theme color                               |
| badge-accent    | Color | Accent theme color                                  |
| badge-neutral   | Color | Neutral theme color                                 |
| badge-info      | Color | Info semantic color                                 |
| badge-success   | Color | Success semantic color                              |
| badge-warning   | Color | Warning semantic color                              |
| badge-error     | Color | Error semantic color                                |

## Basic Usage

## Badge Sizes

```html
<span class="badge badge-xs">Xsmall</span>
<span class="badge badge-sm">Small</span>
<span class="badge badge-md">Medium</span>
<span class="badge badge-lg">Large</span>
<span class="badge badge-xl">Xlarge</span>
<span class="badge badge-2xl">2XLarge</span>
```


## Badge Colors

```html
<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-accent">Accent</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-error">Error</span>
<span class="badge badge-neutral">Neutral</span>
```


## Badge Styles

### Soft Badges

```html
<span class="badge badge-soft">Default</span>
<span class="badge badge-soft badge-primary">Primary</span>
<span class="badge badge-soft badge-secondary">Secondary</span>
<span class="badge badge-soft badge-accent">Accent</span>
<span class="badge badge-soft badge-info">Info</span>
<span class="badge badge-soft badge-success">Success</span>
<span class="badge badge-soft badge-warning">Warning</span>
<span class="badge badge-soft badge-error">Error</span>
<span class="badge badge-soft badge-neutral">Neutral</span>
```


### Outline Badges

```html
<span class="badge badge-outline">Default</span>
<span class="badge badge-outline badge-primary">Primary</span>
<span class="badge badge-outline badge-secondary">Secondary</span>
<span class="badge badge-outline badge-accent">Accent</span>
<span class="badge badge-outline badge-info">Info</span>
<span class="badge badge-outline badge-success">Success</span>
<span class="badge badge-outline badge-warning">Warning</span>
<span class="badge badge-outline badge-error">Error</span>
<span class="badge badge-outline badge-neutral">Neutral</span>
```


### Dashed Badges

```html
<span class="badge badge-dashed">Default</span>
<span class="badge badge-dashed badge-primary">Primary</span>
<span class="badge badge-dashed badge-secondary">Secondary</span>
<span class="badge badge-dashed badge-accent">Accent</span>
<span class="badge badge-dashed badge-info">Info</span>
<span class="badge badge-dashed badge-success">Success</span>
<span class="badge badge-dashed badge-warning">Warning</span>
<span class="badge badge-dashed badge-error">Error</span>
<span class="badge badge-dashed badge-neutral">Neutral</span>
```


### Ghost Badges

```html
<span class="badge badge-ghost">Ghost</span>
```


## Badge Shapes

### Rounded Badge

```html
<span class="badge badge-error badge-rounded">10</span>
```


### Pill Badge

```html
<span class="badge badge-warning badge-pill">Pill badge</span>
```


### Square Badge

```html
<span class="badge badge-neutral badge-square">99+</span>
```


### Circle Badge

```html
<span class="badge badge-success badge-circle">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>
</span>
```


## Badge Indicators

Empty badges are perfect for status indicators or notification dots.

```html
<span class="badge badge-primary badge-circle badge-lg"></span>
<span class="badge badge-primary badge-lg"></span>
<span class="badge badge-primary badge-md"></span>
<span class="badge badge-primary badge-sm"></span>
<span class="badge badge-primary badge-xs"></span>
```


## Badge Composition

Integrate badges with icons or nest them inside other components like buttons.

### Badge with Icon

```html
<span class="badge badge-info">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="M12 16v-4"></path>
    <path d="M12 8h.01"></path>
  </svg>
  Info
</span>
<span class="badge badge-success">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="m9 12 2 2 4-4"></path>
  </svg>
  Success
</span>
<span class="badge badge-warning">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
    <path d="M12 9v4"></path>
    <path d="M12 17h.01"></path>
  </svg>
  Warning
</span>
<span class="badge badge-error">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="m4.9 4.9 14.2 14.2"></path>
  </svg>
  Error
</span>
```


### Badge Inside Button

```html
<button class="btn btn-primary btn-sm btn-active">
  Message
  <span class="badge badge-primary badge-xs">+49</span>
</button>
<button class="btn btn-sm">
  Inbox
  <span class="badge badge-xs badge-primary">+27</span>
</button>
```