jsp-dsv0.1

Badgeshadcn

A short label or status.

Data display
Install
npx shadcn add badge
Import from
@/components/ui/badge
Guidance
draft · v0.1.0

Examples

As installed from shadcn – rendering in jsp-ds tokens through the bridge.

DefaultSecondaryOutlineDestructive
Four variants. Badges label; they aren't buttons.
Signed offIn reviewChanges requested
Status in words, with an icon where it helps – never colour alone.

Guidance

When to use

  • A short label or status on something else: In review, Draft, New.

When not to use

  • As a button or link – badges aren't interactive.
  • For long text – one or two words.

Rules

  • Status is words first; an icon can help; colour is never the only signal.
  • destructive is for problems, not emphasis.

Install

Terminal
npx shadcn add badge
Import
import { Badge } from "@/components/ui/badge"

From shadcn’s own registry. Don’t edit the installed file – jsp-ds styles it through the bridge, and fixes go in styles/overrides.css with an issue.