Atoms / Badge

Badge

<Badge />Stable

Compact label for status, counts, and tags. UpNext extends shadcn's primitive with a four-axis API — tone × appearance × size × shape — that covers external statuses (LSU commit), data tags (QB, WR, RB), and system states (Pending, Signed, Update). The legacy `variant` prop is preserved as a shorthand for tone+appearance presets.

import { Badge } from "@/components/upnext";

Explorer

Cross tone × appearance × size × shape × content to test the full Badge surface. Hover any rendered badge with inspect mode on to see its tokens.

Tone

Appearance

Size

Shape

Content

LSU commit
<Badge tone="primary" appearance="solid" size="sm">LSU commit</Badge>

Inspector

Edit one prop at a time and see the token chain resolve. The preview re-renders, the code panel updates, and the resolves-to column shows every Tailwind class → CSS variable → final value.

Preview

Active

Code

import { Badge } from "@/components/upnext";


<Badge>Active</Badge>

Gallery

Real-world UpNext shapes that compose Badge with other surfaces.

solidsoftoutlinedot

neutral

Tag
Tag
Tag
Tag

primary

Commit
Commit
Commit
Commit

success

Signed
Signed
Signed
Signed

warning

Pending
Pending
Pending
Pending

error

Pulled
Pulled
Pulled
Pulled

info

Update
Update
Update
Update

purple

Premium
Premium
Premium
Premium

denim

Draft
Draft
Draft
Draft

sage

Organic
Organic
Organic
Organic

pink

Featured
Featured
Featured
Featured

cottoncandy

Spotlight
Spotlight
Spotlight
Spotlight

orange

Beta
Beta
Beta
Beta

teal

Synced
Synced
Synced
Synced

lime

New
New
New
New

magenta

Promoted
Promoted
Promoted
Promoted

mint

Available
Available
Available
Available

slate

Archived
Archived
Archived
Archived

mustard

Vintage
Vintage
Vintage
Vintage

violet

Ultra
Ultra
Ultra
Ultra

crimson

Champion
Champion
Champion
Champion

canary

Sunshine
Sunshine
Sunshine
Sunshine

cobalt

Engineering
Engineering
Engineering
Engineering

cocoa

Dormant
Dormant
Dormant
Dormant

emerald

Verified
Verified
Verified
Verified

sky

Live
Live
Live
Live
<Badge tone="primary" appearance="solid">LSU commit</Badge>
<Badge tone="success" appearance="soft">Signed</Badge>
<Badge tone="warning" appearance="outline">Pending</Badge>
<Badge tone="info"    appearance="dot">Update</Badge>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.