badge Component

Badge System

Badge Sizes

Preview Code
Copy
Tiny Small Default Large Big

Badge Colors

Preview Code
Copy
Default Primary Positive Negative Warning Info Red Orange Yellow Olive Green Teal Blue Violet Purple Pink Brown Grey Black

Badges with Icons

Preview Code
Copy
Status Online Error Active Pending Info Featured Favorite Active Alert

Right-Positioned Icons

Preview Code
Copy
Next Continue Completed Close Expand External Download

Dot Badges

Preview Code
Copy
Default Primary Positive Negative Warning Info Purple Pink

Outline Badges

Preview Code
Copy
Default Primary Positive Negative Warning Info Purple Teal

Soft Badges

Preview Code
Copy
Default Primary Positive Negative Warning Info Purple Pink Teal

Dismissible Badges

Preview Code
Copy

Click X to Remove (Auto-injected)

JavaScript React Vue Angular TypeScript

With Icons

JavaScript React Vue.js TypeScript Error

Size Variations

Tiny Small Default Large Big

Round Badges

Preview Code
Copy
1 99 999+ 5 12 3

Badge Overflow - Horizontal Scroll Pattern

Preview Code
Copy

Horizontal Scroll (400px container)

JavaScript TypeScript React Vue Angular Svelte Next.js Nuxt Remix Vite

Separated Badges with Scroll (300px)

Design Development Testing Deployment Monitoring Analytics

Large Badges with Scroll (500px)

Critical High Priority Medium Priority Low Priority Resolved Closed

Dismissible with Scroll (350px)

Python Django Flask FastAPI NumPy Pandas

Badge Overflow - Click to Expand Pattern

Preview Code
Copy

Fixed Count (Shows max 3)

JavaScript TypeScript React Vue Angular Svelte Next.js Nuxt

Width-based (400px container)

Frontend Backend Database DevOps Security Performance

Auto Width (Responsive - resize window)

Design User Experience Prototyping Wireframing Research Testing Analytics A/B Testing

Dismissible Badges with Overflow

Python Django Flask FastAPI NumPy Pandas TensorFlow PyTorch

Size Inheritance with Overflow

Error 1 Error 2 Error 3 Error 4 Error 5
Information Notification Message Warning

Badge Groups

Preview Code
Copy

Connected Badge Groups (Default)

HTML CSS JavaScript +3
React Vue Angular Svelte
Critical Bug Urgent

Separated Badge Groups

Design Development Marketing
Frontend Backend Database
Stage Production Development
Online Active Connected
Alpha Beta RC

Notification Badges

Preview Code
Copy
Notifications Messages Alerts

Tooltip-Style Badges

Badges styled with pointer arrows, useful for inline hints and callouts.

Bottom Position (arrow points up)

Preview Code
Copy
Tiny tip Small hint Success! Error Warning

Top Position (arrow points down)

Preview Code
Copy
Default Primary Active Error Info

Right & Left Positions

Preview Code
Copy
Right position Success
Left position Alert

Interactive Tooltips with Smart Positioning [Hover]

Preview Code
Copy

Smart Auto-Positioning (Default behavior - tooltips appear on top, auto-flip to bottom if needed)

Tiny Badge Small Badge Default Badge Large Badge Big Badge
Default Primary Positive Negative Warning Info Red Orange Yellow Olive Green Teal Blue Violet Purple Pink Brown Grey Black

Optional: Explicit Positioning (Only use when needed)

Left Right

How Smart Positioning Works

Preview Code
Copy

Default Behavior: All tooltips automatically position themselves for best visibility:

  • • Tooltips prefer to appear above the badge (most natural reading position)
  • • If there's not enough space above, they automatically flip to below
  • • No need to specify position - just add data-tooltip="Your text"
  • • Clean visual separation with proper spacing

Simple Usage:

<span class="badge" data-tooltip="This just works!">Hover me</span>

Badge Class API Reference

Type Class Options Usage Notes
Base badge Required base class Always required
badges Group container For grouped badges
Style Variants outline Border only, no fill Modifier to badge
soft Subtle background Modifier to badge
light Light variant with border Tag-like appearance
dot With dot indicator Adds dot before text
round Circular badge For numbers/counts
Size tiny Smallest size Icons auto-sized
small Small size Icons auto-sized
default Medium size No class needed
large Large size Icons auto-sized
big Largest size Icons auto-sized
Semantic Colors primary Main theme color Blue by default
positive Success/good state Green color
negative Error/bad state Red color
warning Caution state Orange/yellow color
info Informational Blue color
Extended Colors red Red color Literal color
orange Orange color Literal color
yellow Yellow color Literal color
olive Olive color Literal color
green Green color Literal color
teal Teal color Literal color
blue Blue color Literal color
violet Violet color Literal color
purple Purple color Literal color
pink Pink color Literal color
brown Brown color Literal color
grey Grey color Literal color
black Black color Literal color
Behavior dismissible Can be closed Auto-injects close button
Icons icon [name] Auto-inject icon e.g., icon check
right icon [name] Icon on right side e.g., right icon arrow-right
Group Modifiers separated Gap between badges Use with badges
rounded Pill-shaped badges Use with badges
overflow Auto-hide excess badges Shows "+X more" or scrollable
overflow scroll Horizontal scroll pattern With arrow navigation
Tooltip Badge tooltip bottom Arrow points up Default position
tooltip top Arrow points down Above reference
tooltip left Arrow points right Left of reference
tooltip right Arrow points left Right of reference
Data Attributes data-notification Notification count e.g., data-notification="5"
data-tooltip Tooltip on hover Shows tooltip text
data-max-visible Max badges to show For overflow groups
data-max-width Max width in pixels For overflow groups

Common Combinations:

<span class="badge primary">Default Primary Badge</span>
<span class="badge small outline positive">Small Outline Success</span>
<span class="badge dismissible icon check">Dismissible with Icon</span>
<span class="badge red" data-notification="3">With Notification</span>
<div class="badges separated primary">...badges...</div>