FeedbackBadge

Badge

A small, inline label. Used for status indicators, taxonomy tags, and the changelog tags at the top of every release.

3 tones2 sizesInline only

Tones

Muted is the default. Default is filled. Accent uses the editorial accent color sparingly.

Tones

MutedDefaultAccent

Sizes

SmallMedium

Anatomy

2 px radius (sharp), 1 px border in the tone color
0.6875 rem font, 0.08 em tracking, uppercase, weight 500
3 px vertical padding, 8 px horizontal padding at md
Inline-flex; never block

Implementation

badge.tsx

import { type ElementType, type ReactNode } from "react"
import { cn } from "@/lib/utils"

type Tone = "default" | "muted" | "accent"
type Size = "sm" | "md"

interface BadgeProps {
  tone?: Tone
  size?: Size
  as?: ElementType
  children: ReactNode
}

export function Badge({ tone = "muted", size = "sm", as: As = "span", className, children }: BadgeProps) {
  return (
    <As
      className={cn(
        "ds-badge",
        `ds-badge--${tone}`,
        size === "sm" && "ds-badge--sm",
        className,
      )}
    >
      {children}
    </As>
  )
}

Props

Prop	Type	Default	Description
`tone`	`"default" \| "muted" \| "accent"`	`"muted"`	Visual style
`size`	`"sm" \| "md"`	`"sm"`	Padding + font size
`as`	`ElementType`	`"span"`	Render as a different element