Badge

Compact chip for tags, statuses, and count markers.

import { Badge } from "@ps1ui/core";

Variants

solidoutlinesubtle

<Badge variant="solid">solid</Badge>
<Badge variant="outline">outline</Badge>
<Badge variant="subtle">subtle</Badge>

Colors

primaryaccentdangermuted

<Badge color="primary">primary</Badge>
<Badge color="accent">accent</Badge>
<Badge color="danger">danger</Badge>
<Badge color="muted">muted</Badge>

Sizes

smmdlg

<Badge size="sm">sm</Badge>
<Badge size="md">md</Badge>
<Badge size="lg">lg</Badge>

Solid

releasedfeaturedbreakingdraft

<Badge variant="solid" color="primary">released</Badge>
<Badge variant="solid" color="accent">featured</Badge>
<Badge variant="solid" color="danger">breaking</Badge>
<Badge variant="solid" color="muted">draft</Badge>

Outline

stablepreviewdeprecatedarchived

<Badge variant="outline" color="primary">stable</Badge>
<Badge variant="outline" color="accent">preview</Badge>
<Badge variant="outline" color="danger">deprecated</Badge>
<Badge variant="outline" color="muted">archived</Badge>

Leading slot (text)

↑up 24%↓down 8%

<Badge leading="↑">up 24%</Badge>
<Badge color="danger" leading="↓">down 8%</Badge>

Leading slot (icon component)

The leading prop accepts any ReactNode, so an icon component slots in the same way — this docs page cannot render the JSX form directly (Astro cannot serialise React children passed as a prop), but the pattern above is how consumers use it in real .tsx code.

import { IconArrowUp } from "your-icon-library";

<Badge leading={<IconArrowUp aria-hidden />}>up 24%</Badge>

Interactive (as button / link)

#accent

<Badge as="button" variant="outline">
  filter: react
</Badge>
<Badge as="a" href="#" variant="subtle" color="accent">
  #accent
</Badge>

Disabled

<Badge as="button" variant="solid" disabled>
  unavailable
</Badge>

Badges render as a plain span by default. Pass as="button" or as="a" to make the chip interactive — the same variant / color styling is preserved, and hover, active, focus-visible, and disabled treatments activate automatically.

Props

Prop	Type	Default	Description
`as`	`ElementType`	`"span"`	Element or component to render instead of the native <span> — pass "button" or "a" to make the badge interactive.
`variant`	`"solid" \| "outline" \| "subtle"`	`"subtle"`	Visual weight: "solid" filled, "outline" bordered on transparent, "subtle" color-tinted fill.
`color`	`"primary" \| "accent" \| "danger" \| "muted"`	`"primary"`	Semantic color: "primary", "accent", "danger", or neutral "muted".
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Chip size — affects font size, padding, and the leading-slot gap.
`leading`	`ReactNode`	—	Leading element (typically an icon) rendered before children with a shared inline gap.

Also accepts the attributes of the element rendered via as (default: <span>).