Badge
Small pill-shaped labels for tags, status indicators, and counters.
Preview
Default
v1.0
New
3 items
Usage
<span class="glass-badge">Default</span>
<span class="glass-badge">v1.0</span>
<span class="glass-badge">New</span>CSS Properties
| Property | Value |
|---|---|
| Background | rgba(255, 255, 255, 0.15) with blur(8px) |
| Border | 1px solid var(--glass-border) |
| Border Radius | 9999px (pill shape) |
| Padding | 0.25rem 0.65rem |
| Font | 0.75rem, weight 600, uppercase, letter-spacing 0.03em |
| Color | var(--glass-text-secondary) |
| Layout | inline-flex, centered, gap: 0.35rem |
With Modifiers
Accent
Success
Warning
Error
Glow
<span class="glass-badge vibrant">Accent</span>
<span class="glass-badge vibrant success">Success</span>
<span class="glass-badge vibrant warning">Warning</span>
<span class="glass-badge vibrant error">Error</span>
<span class="glass-badge glow">Glow</span>