Badge
Displays a badge or a component that looks like a badge.
Variants
Different badge variants.
DefaultSecondaryDestructiveOutline
With Icons
Badges with leading or trailing icons.
VerifiedPendingErrorWarningFeaturedPremium
Status Badges
Commonly used for status indicators.
Order Status
DraftProcessingShippedDeliveredCancelled
User Status
ActiveInactivePendingSuspended
Payment Status
PaidPendingFailedRefunded
Priority Indicators
For task or issue priority.
CriticalHighMediumLowInfo
Category Tags
Using badges as category or topic tags.
Blog Post Topics
ReactTypeScriptDesignTutorialJavaScript
Product Features
NewPopularSaleLimitedTrending
In Context
Badges used within other components.
Website Redesign
Update the homepage layout and color scheme
DesignFrontendQ2 2026
Premium AccountActive
Two-Factor AuthEnabled
Email VerificationPending
Phone VerificationNot Started
| Name | Role | Status |
|---|---|---|
| John Doe | Admin | Active |
| Jane Smith | Editor | Active |
| Bob Johnson | Viewer | Inactive |
Notification Count
Small badges for notification counts.
3
12
5