BADGE

Compact status indicator with semantic variants. Monospace font, uppercase, minimal padding. SCANNING variant includes a blink animation.

PREVIEW

●ONLINE●SCANNING⚠WARNING✕CRITICAL○OFFLINE

INSTALLATION

BASH

npx shadcn@latest add @scificn/badge

USAGE

TSX

import { Badge } from '@/ui/badge'

export function StatusBar() {
  return (
    <div style={{ display: 'flex', gap: '0.5rem' }}>
      <Badge variant="ACTIVE">REACTOR ONLINE</Badge>
      <Badge variant="WARNING">SHIELD LOW</Badge>
      <Badge variant="CRITICAL">HULL BREACH</Badge>
    </div>
  )
}

VARIANTS

●ACTIVEvariant="ACTIVE"

●SCANNINGvariant="SCANNING"

⚠WARNINGvariant="WARNING"

✕CRITICALvariant="CRITICAL"

○OFFLINEvariant="OFFLINE"

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
variant	ACTIVE \| SCANNING \| WARNING \| CRITICAL \| OFFLINE	ACTIVE	Controls color, glow, and animated prefix symbol.
className	string	—	Additional classes merged via cn().