Classic Badges
Comprehensive badge system with 10+ variations — glassy status, dot indicators, micro glow, pastel chips, tech tags, icon pills, blur tags, contrast labels, neon edges, and glossy gradients. Supports dark/light theme, compact mode, and custom accent color.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| theme | "dark" | "light" | "dark" | Color theme — dark for dashboards, light for minimal interfaces. |
| compact | boolean | false | Hides the Status Indicators section and tightens spacing for embedding in smaller areas. |
| accentColor | string | "#6366f1" | Custom accent color applied to the Micro Glow badges. |
When to Use
Use when you need a complete, ready-to-use badge system for SaaS dashboards, admin panels, or luxury interfaces. Supports both dark and light themes for easy integration.
Best Practices
Pair dark theme with dark-background pages and light theme with white/gray pages. Use compact mode when embedding inside a settings panel or sidebar.
Why This Component Matters
A consistent badge system communicates status, roles, and metadata hierarchy across your entire interface — standardizing these prevents visual noise and speeds up user comprehension.
FAQ
QHow do I switch to light mode?
Pass theme="light" — all 10 badge variants automatically adapt their colors, backgrounds, and borders.
QCan I customize the accent color?
Yes — the accentColor prop controls the MicroBadge gradient and ring color. Pass any CSS color string.
QWhat does compact mode do?
It hides the Status Indicators section and reduces padding — useful when embedding inside a sidebar or modal.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.