Badge Component

A compact, accessible badge component built with Tailwind CSS and semantic HTML. Highlight statuses, labels, counts, and categories with multiple color variants, sizes, and styles. Supports soft, outline, and ghost variants for versatile notification indicators and content metadata.

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

<span class="badge">Badge</span>

<span className="badge">Badge</span>

View Code

Badge Sizes

Xsmall Small Medium Large Xlarge 2XLarge

<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>

View Code

Badge Colors

Default Primary Secondary Accent Info Success Warning Error Neutral

<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>

View Code

Badge Styles

Soft Badges

Default Primary Secondary Accent Info Success Warning Error Neutral

<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>

View Code

Outline Badges

Default Primary Secondary Accent Info Success Warning Error Neutral

<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>

View Code

Dashed Badges

Default Primary Secondary Accent Info Success Warning Error Neutral

<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>

View Code

Ghost Badges

Ghost

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

View Code

Badge Shapes

Rounded Badge

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

View Code

Pill Badge

Pill badge

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

View Code

Square Badge

99+

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

View Code

Circle Badge

<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>

View Code

Badge Indicators

Empty badges are perfect for status indicators or notification dots.

<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>

View Code

Badge Composition

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

Badge with Icon

Info Success Warning Error

<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>

View Code

Badge Inside Button

<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>

View Code