Badge

Status pills with semantic colours, an optional status dot and a pulsing live indicator.

2 files · 52 locdeps: clsx, tailwind-merge

DefaultSecondaryOutlineSoftOperationalDegradedIncidentBetaNew

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/badge.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs badge

import { Badge } from "@/components/opus/ui/badge";

<Badge variant="success" dot>Operational</Badge>

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "outline" \| "soft" \| "success" \| "warning" \| "destructive" \| "info" \| "gradient"	"default"	Colour scheme.
dot	boolean	—	Leading status dot in the current colour.
pulse	boolean	—	Animate the dot with a ping (live / incident).