Display

Badge

A small label for status or category. Renders a span, or anything via render.

packages/design-system/components/ui/badge.tsx

Examples

DefaultSecondaryOutlineDestructiveGhostLink
Variants
In review
With an icon
Pricing
As a link

Anatomy

  1. 01Pill, 20px tall
  2. 02Optional icon, 12px
  3. 03Label, text-xs medium

Usage

import { Badge } from "@repo/design-system/components/ui/badge";

<Badge variant="secondary">Popular</Badge>
<Badge render={<Link href="/pricing" />}>Pricing</Badge>

Props

PropTypeDefaultDescription
variant"default" | "secondary" | "destructive" | "outline" | "ghost" | "link""default"Link and ghost only show a fill on hover.
renderReactElement | (props, state) => ReactElementnoneBase UI's replacement for asChild: render the part as another element, such as a Button or a Link.
classNamestringnoneMerged last with cn(). Use it for layout (width, margin), not to restyle the component.

Guidance

Do

  • Keep it to one or two words.

Don't

  • Use it as a button.

Where it's used