Badges

Default Badges

Contextual badge variations

Primary Secondary Success Danger Warning Info Light Dark
Pill Badges

Rounded pill badges

Primary Secondary Success Danger Warning Info Light Dark
Badge Styles
Soft Badges

Light background with colored text

Primary Secondary Success Danger Warning Info
Soft Pill Badges
Primary Secondary Success Danger Warning Info
Outline Badges

Bordered badges without fill

Primary Secondary Success Danger Warning Info
Outline Pill Badges
Primary Secondary Success Danger Warning Info
Badges in Context
Heading Badges

Badges scale to match parent element

Heading 1 New

Heading 2 New

Heading 3 New

Heading 4 New

Heading 5 New
Heading 6 New
Button Badges

Badges inside buttons for counters

Sizes & Icons
Badge Sizes

Different badge size variations

Small Default Large
Small Pill Default Pill Large Pill
Badges with Icons

Combine badges with icons

Featured Verified Alert Info
245 18 1.2k 32
Positioned Badges
Notification Badges

Position badges on icons and avatars

Avatar Badges
Avatar
Avatar
Avatar
Avatar
Link & Clickable Badges

Badges that are clickable links

Primary Link Secondary Link Success Link Danger Link
Tag Style
JavaScript Vue.js React Angular Node.js
Real-World Examples
Status Indicators

Common status badge patterns

Order Status
Pending Processing Shipped Delivered Cancelled Refunded
User Status
Online Away Busy Offline
Priority Levels
Critical High Medium Low
List with Badges

Badges in list items

  • Inbox 12
  • Starred 3
  • Sent 24
  • Drafts 5
  • Trash 8
Table with Badges

Using badges in data tables

Product Category Status Stock Price
Premium Headphones
SKU: HP-001 		Electronics In Stock 245 $299.99
Wireless Mouse
SKU: WM-042 		Electronics Low Stock 12 $49.99
USB-C Cable
SKU: UC-108 		Accessories Out of Stock 0 $19.99
Laptop Stand New
SKU: LS-055 		Furniture In Stock 89 $79.99