Badge

A compact pill communicating a short status, label, or count inline with surrounding content.

Pipeline

Tests passingDeploy queued3 checks failedSkippedv2026.9.21

Labels

enhancementregressionneeds reprogood first issue

View code

<div mix={[vstack({ gap: 5, align: "start" })]}>
	<div mix={[vstack({ gap: 2, align: "start" })]}>
		<span mix={[text("xs"), weight("semibold"), fg("neutral.muted")]}>Pipeline</span>
		<div mix={[hstack({ gap: 2, align: "center" }), flexWrap()]}>
			<Badge color="success" variant="secondary">
				<Badge.Icon>
					<CircleCheckIcon />
				</Badge.Icon>
				<Badge.Text>Tests passing</Badge.Text>
			</Badge>
			<Badge color="warning" variant="secondary">
				<Badge.Icon>
					<ClockIcon />
				</Badge.Icon>
				<Badge.Text>Deploy queued</Badge.Text>
			</Badge>
			<Badge color="danger" variant="secondary">
				<Badge.Icon>
					<CircleXIcon />
				</Badge.Icon>
				<Badge.Text>3 checks failed</Badge.Text>
			</Badge>
			<Badge color="neutral" variant="outline">
				Skipped
			</Badge>
			<Badge color="brand">
				<Badge.Icon>
					<ZapIcon />
				</Badge.Icon>
				<Badge.Text>v2026.9.21</Badge.Text>
			</Badge>
		</div>
	</div>

	<div mix={[vstack({ gap: 2, align: "start" })]}>
		<span mix={[text("xs"), weight("semibold"), fg("neutral.muted")]}>Labels</span>
		<div mix={[hstack({ gap: 2, align: "center" }), flexWrap()]}>
			<Badge color="brand" variant="outline">
				enhancement
			</Badge>
			<Badge color="danger" variant="outline">
				regression
			</Badge>
			<Badge color="warning" variant="outline">
				needs repro
			</Badge>
			<Badge color="neutral" variant="secondary">
				good first issue
			</Badge>
		</div>
	</div>
</div>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { Badge } from "@sdxc/ui";

Renders a single-line pill host, colored and shaped through the data-color and data-variant attribute contract: "default" fills the pill solid, "secondary" tints the fill, "outline" keeps just a border.

Composition

The parts the component publishes, each a static property of the host.

Badge
Badge.IconRenders the badge's leading or trailing glyph slot: an inert, shrink-proof <span> sized to hold a single small icon and hidden from assistive technology, since Badge.Text carries the badge's meaning.
Badge.TextRenders the badge's label slot: a <span> with its line height collapsed to one, keeping short label text vertically centered inside the pill.

Examples

<Badge color="success" variant="secondary">
	<Badge.Icon><CheckIcon /></Badge.Icon>
	<Badge.Text>{t("badge.active")}</Badge.Text>
</Badge>

<Badge color="danger" variant="outline">{t("badge.failed")}</Badge>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Description
`color?`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role. Defaults to DEFAULT_COLOR.
`variant?`	`"default" \| "secondary" \| "outline"`	Visual weight. Defaults to DEFAULT_VARIANT.

Also accepts everything in TagProps<"span">.

Badge.Icon

Also accepts everything in TagProps<"span">.

Badge.Text

Also accepts everything in TagProps<"span">.

Types

Name	Values	What it decides
`Color`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role, each mapped to its matching `--ui-*` variables.
`Variant`	`"default" \| "secondary" \| "outline"`	Visual weight the badge renders with: a solid fill, a tinted fill, or a transparent chip with just an outline.