Stat Badge
A compact inline badge for embedding stats in text or headers. Features pulse indicator, icons, glass effects, accent bars, hover/click interactions, and multiple variants.
Installation
$ npx shadcn@latest add @orecus/stat-badgeDependencies:
lucide-react
Registry:
@orecus/color-utilsskeleton
Component
Compact badges for displaying stats inline or in tight spaces.
Basic Usage
Users2,847Orders142Uptime98%
Pulse Indicator
Live3 onlineRecording
Sizes
SmallMedium
Inline Usage
Our platform currently has 12,847 active users generating $48K in revenue.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | number | — | Value to display |
label | string | — | Optional label |
icon | LucideIcon | — | Optional icon |
color | ThemeColor | 'primary' | Badge color - affects text/icon colors and accent bar |
variant | 'default' | 'outline' | 'ghost' | 'default' | Visual variant |
size | 'sm' | 'md' | 'md' | Badge size |
pulse | boolean | false | Show pulsing dot indicator |
type | 'normal' | 'subtle' | 'strong' | 'solid' | 'none' | 'none' | Glass effect style. When not 'none', replaces color-based background with glass |
invert | boolean | false | Invert glass overlay approach (white-on-light, dark-on-dark) |
accentBar | 'none' | 'top' | 'bottom' | 'none' | Gradient accent bar position |
accentBarVariant | 'fade' | 'solid' | 'fade' | Accent bar gradient style |
accentColor | ThemeColor | — | Color for accent bar (defaults to color prop) |
accentBarOnHover | boolean | false | Whether accent bar appears only on hover |
hoverEffect | 'none' | 'lift' | 'scale' | 'none' | Hover effect style |
hoverBorder | boolean | false | Whether border color animates on hover using accentColor |
onClick | () => void | — | Click handler - makes badge interactive |
clickEffect | 'none' | 'scale' | 'none' | Click effect style |
shadow | 'none' | 'sm' | 'default' | 'lg' | 'none' | Shadow style |
radius | 'none' | 'sm' | 'default' | 'lg' | 'full' | 'full' | Border radius |
loading | boolean | false | Shows skeleton loading state |
className | string | — | Additional CSS classes |