Badge

Status badge with adjustable cyberpunk intensity. Features pulsing glow effects and status indicators at higher intensity levels.

npx shadcn@latest add https://ui.farstar-studio.com/r/badge.json

Preview

SubtleMediumFull

DefaultSuccessWarningErrorInfo

OnlineOffline

Variants

variant

DefaultOutlineFilled

intensity

SubtleMediumFull

status

DefaultSuccessWarningErrorInfo

Props

Prop	Type	Default	Description
variant	"default" \| "outline" \| "filled"	"default"	The visual style of the badge
intensity	"subtle" \| "medium" \| "full"	"subtle"	Cyberpunk visual intensity level
animated	boolean	true	Enable/disable animations (respects prefers-reduced-motion)
status	"default" \| "success" \| "warning" \| "error" \| "info"	"default"	The status color of the badge
size	"default" \| "sm" \| "lg"	"default"	The size of the badge
dot	boolean	false	Shows a status dot (pulses at full intensity)
icon	ReactNode	—	Icon to display in the badge

Usage

Basic Badge

tsx

1import { Badge } from "@/registry/zero/ui/badge"
2 
3export function Example() {
4  return (
5    <Badge status="success">Online</Badge>
6  )
7}

Intensity Levels

tsx

1import { Badge } from "@/registry/zero/ui/badge"
2 
3export function Example() {
4  return (
5    <div className="flex gap-4">
6      <Badge intensity="subtle" status="success">Subtle</Badge>
7      <Badge intensity="medium" status="success">Medium</Badge>
8      <Badge intensity="full" status="success">Full</Badge>
9    </div>
10  )
11}

Status Badge with Dot

tsx

1import { StatusBadge } from "@/registry/zero/ui/badge"
2 
3export function Example() {
4  return (
5    <>
6      <StatusBadge online intensity="full" />
7      <StatusBadge online={false} intensity="full" />
8    </>
9  )
10}

All Status Colors

tsx

1import { Badge } from "@/registry/zero/ui/badge"
2 
3export function Example() {
4  return (
5    <div className="flex gap-2">
6      <Badge status="default">Default</Badge>
7      <Badge status="success">Success</Badge>
8      <Badge status="warning">Warning</Badge>
9      <Badge status="error">Error</Badge>
10      <Badge status="info">Info</Badge>
11    </div>
12  )
13}