labsUI

Badge & Pill

Minimal status tags. Rounded badge or fully rounded pill, with optional dot. pulse adds an expanding live-status ring.

npx @kznlabs/labsui add badge
DefaultSecondaryDraftLiveFailed
import { Badge } from "@/components/ui/badge";export function Status() {  return (    <Badge variant="success" shape="pill" dot pulse>      Live    </Badge>  );}

<Badge>

  • dot
    boolean

    Leading status dot in the current text color.

  • pulse
    boolean

    Dot emits an expanding ring forever, like a live status. Needs dot.

  • shapedefault "badge"
    "badge" | "pill"

    "pill" = fully rounded tag.

  • variantdefault "default"
    "default" | "secondary" | "outline" | "destructive" | "success"

    Color and surface.

PropTypeDefault
dot

Leading status dot in the current text color.

boolean—
pulse

Dot emits an expanding ring forever, like a live status. Needs dot.

boolean—
shape

"pill" = fully rounded tag.

"badge" | "pill""badge"
variant

Color and surface.

"default" | "secondary" | "outline" | "destructive" | "success""default"

Also accepts every <span> prop.

* required. Every component also takes className.