# Badge A label that emphasizes an element that requires attention, or helps categorize with other similar elements. --- ## Variants ```tsx import { Badge } from '@vercel/geistcn/components'; import type { JSX } from 'react'; export function Component(): JSX.Element { return (
gray gray-subtle
blue blue-subtle
purple purple-subtle
amber amber-subtle
red red-subtle
pink pink-subtle
green green-subtle
teal teal-subtle
inverted Trial Turborepo
); } ``` ## Sizes ```tsx import { Badge } from '@vercel/geistcn/components'; import type { JSX } from 'react'; export function Component(): JSX.Element { return (
Small Medium Large
); } ``` ## With icons ```tsx import { Badge } from '@vercel/geistcn/components'; import { Shield } from '@vercel/geistcn/icons'; import type { JSX } from 'react'; export function Component(): JSX.Element { return (
} size="lg" variant="gray"> gray } size="md" variant="gray"> gray } size="sm" variant="gray"> gray } size="sm" variant="gray" contrast="low"> gray } size="md" variant="gray" contrast="low"> gray } size="lg" variant="gray" contrast="low"> gray
} size="lg" variant="blue"> blue } size="md" variant="blue"> blue } size="sm" variant="blue"> blue } size="sm" variant="blue" contrast="low"> blue } size="md" variant="blue" contrast="low"> blue } size="lg" variant="blue" contrast="low"> blue
} size="lg" variant="purple"> purple } size="md" variant="purple"> purple } size="sm" variant="purple"> purple } size="sm" variant="purple" contrast="low"> purple } size="md" variant="purple" contrast="low"> purple } size="lg" variant="purple" contrast="low"> purple
} size="lg" variant="amber"> amber } size="md" variant="amber"> amber } size="sm" variant="amber"> amber } size="sm" variant="amber" contrast="low"> amber } size="md" variant="amber" contrast="low"> amber } size="lg" variant="amber" contrast="low"> amber
} size="lg" variant="red"> red } size="md" variant="red"> red } size="sm" variant="red"> red } size="sm" variant="red" contrast="low"> red } size="md" variant="red" contrast="low"> red } size="lg" variant="red" contrast="low"> red
} size="lg" variant="pink"> pink } size="md" variant="pink"> pink } size="sm" variant="pink"> pink } size="sm" variant="pink" contrast="low"> pink } size="md" variant="pink" contrast="low"> pink } size="lg" variant="pink" contrast="low"> pink
} size="lg" variant="green"> green } size="md" variant="green"> green } size="sm" variant="green"> green } size="sm" variant="green" contrast="low"> green } size="md" variant="green" contrast="low"> green } size="lg" variant="green" contrast="low"> green
} size="lg" variant="teal"> teal } size="md" variant="teal"> teal } size="sm" variant="teal"> teal } size="sm" variant="teal" contrast="low"> teal } size="md" variant="teal" contrast="low"> teal } size="lg" variant="teal" contrast="low"> teal
} size="lg" variant="inverted"> inverted } size="md" variant="inverted"> inverted } size="sm" variant="inverted"> inverted
); } ``` ## Pill A special link, not quite as prominent as a button, based on styling. ```tsx import { badgeVariants } from '@vercel/geistcn/components'; import { LogoSlackColor } from '@vercel/geistcn/icons'; import { cn } from '@vercel/geistcn/utils'; import { Link } from '@vercel/microfrontends/next/client'; import type { JSX } from 'react'; export function Component(): JSX.Element { return (
Label Label Label
Label Label Label
); } ``` ## Best Practices * Use Badge for short, scannable metadata that sits next to the thing it describes: status, plan tier, environment, or role. One badge per row; two side by side is a sign the row needs a second column. * For a colored dot without text, use `Status Dot`. For clickable filter chips that toggle a query, use the `pill` variant or a small `Button`. * Badges are static labels. Don’t wire `onClick` onto them; promote to a Button or link if the user can act on the value. * Keep badge content to text or `icon` + text. Never stack two icons or a child Badge inside a Badge. * Pair lifecycle badges (`Alpha`, `Beta`, `Early Access`) with a `Tooltip` that names the limit, like `Alpha: API may change before GA`. * Title Case, one word when possible, two max: `Active`, `Pending`, `Pro`, `Enterprise Trial`. Match the canonical API or log term: `Production` not `Prod`, `Deployed` not `Live`, `Canceled` not `Cancelled` (the Vercel API uses one L). * Don’t add a checkmark icon for success states or an X for errors; the variant carries that signal. Map meaning to color: `green` for healthy, `red` for error, `amber` for warning, `blue` for informational or production, `gray` for neutral. The `-subtle` suffix tones any of them down on dense surfaces. * Skip stuffing sentences inside (`Currently Active`, `You are on Pro`); the surrounding row supplies the context. * Set `title` for icon-only or ambiguous badges so screen readers announce the meaning. Don’t rely on color alone; the text has to be readable without it.