Badges
Default Badges
Contextual badge variations
PrimarySecondarySuccessDangerWarningInfoLightDark
Pill Badges
Rounded pill badges
PrimarySecondarySuccessDangerWarningInfoLightDark
Badge Styles
Soft Badges
Light background with colored text
PrimarySecondarySuccessDangerWarningInfo
Soft Pill Badges
PrimarySecondarySuccessDangerWarningInfoOutline Badges
Bordered badges without fill
PrimarySecondarySuccessDangerWarningInfo
Outline Pill Badges
PrimarySecondarySuccessDangerWarningInfoBadges 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
SmallDefaultLarge
Small PillDefault PillLarge 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
Link & Clickable Badges
Badges that are clickable links
Real-World Examples
Status Indicators
Common status badge patterns
Order Status
PendingProcessingShippedDeliveredCancelledRefunded
User Status
OnlineAwayBusyOffline
Priority Levels
CriticalHighMediumLow
List with Badges
Badges in list items
- Inbox12
- Starred3
- Sent24
- Drafts5
- Trash8
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 |