Badge

Playground

<Badge>Badge</Badge>

Preview

variant picks the surface: solid default and destructive, soft secondary, bordered outline, bare ghost, and link which underlines on hover.

<Badge>default</Badge>
<Badge variant="secondary">secondary</Badge>
<Badge variant="destructive">destructive</Badge>
<Badge variant="outline">outline</Badge>
<Badge variant="ghost">ghost</Badge>
<Badge variant="link">link</Badge>

Installation

npx shadcn@latest add https://espresso-base-ui.vercel.app/r/badge.json

Usage

import { Badge } from "@/components/ui/badge"

<Badge variant="secondary" size="md">
  Beta
</Badge>

Sizes

Three sizes: sm (16px), md (20px, the default) and lg (24px, with slightly larger text). The outline variant trims 2px off each height to make room for its shadow ring.

<Badge size="sm">small</Badge>
<Badge size="md">medium</Badge>
<Badge size="lg">large</Badge>

With icons

Drop an icon before or after the text and tag it with data-icon="inline-start" or data-icon="inline-end" – the badge sizes the svg and balances the padding on that edge.

<Badge size="md">
  <Diamond data-icon="inline-start" />
  New
</Badge>

<Badge variant="secondary" size="md">
  Updates
  <Diamond data-icon="inline-end" />
</Badge>

<Badge size="md" className="bg-blue-600 text-blue-100">
  <Diamond data-icon="inline-start" />
  Blue
</Badge>

As a link

The render prop swaps the underlying element – pass an anchor (or a router link) and the badge merges its classes and props onto it.

<Badge render={<a href="#" />}>default</Badge>
<Badge variant="outline" render={<a href="#" />}>
  outline
</Badge>

API reference

Badge renders a span by default and accepts all standard span props plus className. Custom colors are just utility overrides – e.g. className="bg-blue-600 text-blue-100".

Styling hooks

The rendered element carries data-slot="badge", data-variant and data-size for CSS targeting. The badgeVariants cva helper is also exported for applying badge styles to arbitrary elements:

import { badgeVariants } from "@/components/ui/badge"

<a href="#" className={cn(badgeVariants({ variant: "outline", size: "lg" }))}>
  Docs
</a>