Components
Badge
Small labels with personality: soft, solid and outline, plus a breathing glow, a sweep of light and holographic foil. Six colours, two sizes, an optional icon.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { Badge } from '@vizzele/react';
<Badge>Beta</Badge>
<Badge variant="shine" color="amber">Pro</Badge>
<Badge variant="holo">Limited</Badge>
<Badge variant="glow" color="acid" icon={<Spark />}>New</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'soft' | 'solid' | 'outline' | 'glow' | 'shine' | 'holo' | 'soft' | Style. |
color | 'accent' | 'cyan' | 'magenta' | 'amber' | 'acid' | 'violet' | 'neutral' | 'accent' | Colour. |
size | 'sm' | 'md' | 'md' | Size. |
icon | ReactNode | — | Before the text. |
Accessibility
- Text colours are mixed with the theme text colour so every badge keeps readable contrast in both themes.
- The glow, shine and foil stop with reduced motion.