Skip to content

Badge

Inline status label with semantic color variants.

Preview

Installation

$pnpm exec dgadd add ui/badge
[Installs to]src/components/ui/badge[Item]ui/badge

dgadd ships in @diffgazer/add on npm: pnpm add -D @diffgazer/add puts it on pnpm exec, and npx @diffgazer/add runs it without the install.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS from the installed package.

Usage

tsx
import { Badge } from "@/components/ui/badge";export default function BadgeDefault() {  return <Badge>DEFAULT</Badge>;}

Examples

Variants

Preview

Sizes

Preview

Outline

Preview

API Reference

Badge

NameTypeDefaultDescription
variant"success" | "warning" | "error" | "info" | "neutral""neutral"Semantic color token. Picks foreground, background, border, and dot color together.
size"xs" | "sm" | "md" | "lg""sm"Padding and font-size token.
appearance"solid" | "outline""solid"Solid keeps the tinted fill; outline renders border and text only on a transparent background.
dotbooleanfalseRenders a leading status dot in the variant color.
childrenReactNode—Badge label.

Accessibility

Notes

Uppercase Label

Badge renders its label uppercase with wide tracking — the terminal label voice used across the library. Pass mixed-case copy; the transform is presentational, so assistive tech still reads the original text.

Dot Prop

Set dot={true} to render a colored status indicator before the label content.

Outline Appearance

appearance="outline" drops the tinted fill and keeps the variant border and text color — for badges sitting on an already-tinted row or card.

Variant Colors Across Themes

Variants read theme tone tokens, so every tone carries the same hue family in both themes — success green, info blue, warning amber, error red — at the lightness each background needs. Override the --base-* primitives to retone them; the variant vocabulary stays the same.

Dynamic Content

For badges with content that updates (e.g., unread counts), add role="status" to the Badge for screen reader announcements. Static badges (labels like "Beta" or "New") need no additional ARIA.

Source

Install via CLI: pnpm exec dgadd add ui/badge.

Highlighted source loads after this disclosure opens. Browse the source repository.