badge
Status indicator with dither fill
Corebadge.css
Installation
$
npx skeehn add badgePreview
SolidDitherOutlineGhostInvertedPixelSuccessWarningErrorInfoLive
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'solid' | 'dither' | 'outline' | 'ghost' | 'inverted' | 'pixel' | — | Visual variant |
| color | 'success' | 'warning' | 'destructive' | 'info' | — | Semantic color override |
| pulsing | boolean | false | Animate with a pulsing effect |
Usage
badge.tsx
1import { Badge } from '@skeehn/react';23export function StatusBadges() {4 return (5 <div className="flex gap-2">6 <Badge variant="dither">Default</Badge>7 <Badge color="success">Active</Badge>8 <Badge color="warning">Pending</Badge>9 <Badge color="destructive">Error</Badge>10 <Badge color="success" pulsing>Live</Badge>11 </div>12 );13}