Badge

Playground

<Badge>Badge</Badge>

Usage

import { Badge } from "@sophic/portal-ui/components/ui/badge";

<Badge variant="secondary">Badge</Badge>

For an interactive badge, compose with asChild so hover styles apply:

<Badge variant="ghost" asChild>
  <a href="/path">Ghost</a>
</Badge>

Props

Badge also accepts every native <span> attribute.

Tokens

Badge reads --badge-* from the Base System (with fallbacks so apps without those tokens keep the previous look).

Changelog

• 24 September 2026 — Info, warning, and error badges use the washed blue, amber, and red ramps. Full notes
• 24 September 2026 — Outline badges keep the hairline in both palettes. Tab and range pills do not. Full notes
• 24 September 2026 — Hairline border only on the outline badge. Height 24px, side padding 12px. Full notes
• 18 August 2026 — Styles live in a CSS module; look and tokens unchanged. Full notes
• 22 July 2026 — Hover is link-only; link variant removed; weight/status polish. Full notes
• 14 July 2026 — Status tints (info, warning); 22px pills. Full notes