Components
Badge
Futuristic label badge with pill, rectangle, and corner-cut shapes, dot indicators, and glow.
npx neonblade add badgeShapes
PillRectangleCorner CutBottom LeftTop RightAll Corners
Variants
OutlineSolidGhostOutlineSolidGhostOutlineSolidGhost
Dot Indicators
StaticPulseFlickerLiveOnline
Sizes
XSmallSmallMedium
Glow
System ActiveCriticalConfirmed
Custom Colors
WarningNeuralAlert
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Badge label — text or any inline React node. |
color | "cyan" | "pink" | "green" | string | "cyan" | Accent color. Use a preset name or any CSS color value. |
variant | "solid" | "outline" | "ghost" | "outline" | Visual style. "solid" fills with accent color, "outline" shows a border with transparent background, "ghost" uses a subtle tinted background. |
shape | "pill" | "rectangle" | "corner-cut" | "pill" | "pill" is a fully rounded capsule, "rectangle" has sharp corners, "corner-cut" applies a diagonal polygon cut. |
corner | "bottom-right" | "bottom-left" | "top-right" | "top-left" | "all" | "bottom-right" | Which corner is cut. Only applies when shape is corner-cut. |
cornerSize | number | 8 | Depth of the diagonal corner cut in pixels. Only applies when shape is corner-cut. |
dot | "none" | "solid" | "pulse" | "flicker" | "none" | Indicator dot shown before the label. "solid" is static, "pulse" breathes in/out, "flicker" neon-flickers. |
glow | boolean | false | Adds a neon box-shadow and text-shadow glow using the badge color. |
size | "xs" | "sm" | "md" | "sm" | Controls badge padding and font size. |