Component
Badge
Pill-shaped badges with orbit hover effects. Clean borders and semantic colors for status and labels.
Badge Variants
DefaultSecondaryOutlineDestructiveAccentGhost
Size Variants
SmallDefaultLarge
Small OutlineDefault OutlineLarge Outline
With Icons
VerifiedRejectedFeaturedPendingNewQuick
Status Badges
Order #12345Completed
Order #12346Processing
Order #12347Cancelled
Order #12348VIP Priority
Tag Cloud
ReactTypeScriptNext.jsTailwind CSSRadix UIshadcn/uiNode.jsGraphQLPostgreSQLDocker
Notification Badges
Badges with special styling for notifications and promotions.
LiveNew LaunchTrendingAlerts
Feature Labels
Pro Feature
PROAdvanced analytics and reporting tools for power users.
New Release
NEWCheck out our latest component additions and improvements.
Beta Feature
BETATry out experimental features before official release.
Deprecated
DEPRECATEDThis feature will be removed in the next major version.
API Reference
Badge Props
| Prop | Type | Default |
|---|---|---|
| variant | "default" | "secondary" | "destructive" | "outline" | "accent" | "ghost" | "default" |
| size | "sm" | "default" | "lg" | "default" |