Docs › Components › Badge

Shadcn Badge

The shadcn/ui Badge is a small, copy-paste label for status, categories, counts, and tags, styled with Tailwind CSS v4. It ships four variants, renders as a link when needed, and is easy to extend with your own status colors. Badges appear throughout ShadcnStore blocks in tables, product lists, and dashboards.

Key features

• Four variants: default, secondary, destructive, and outline.
• Renders as a link via the render prop.
• Extensible status colors through the badgeVariants helper.
• Icon support for verified, status, and count indicators.
• Tiny footprint: a styled span with no runtime dependencies.

Installation

npx shadcn@latest add badge

This adds badge.tsx to @/components/ui and exports the badgeVariants helper.

Usage

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

export function Example() {
  return <Badge>New</Badge>
}

Variants

Set the style with the variant prop.

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>

Status colors

There is no built-in success or warning variant. Add them by extending badgeVariants, or apply Tailwind color classes for a one-off:

<Badge className="bg-green-600 text-white">Active</Badge>
<Badge variant="secondary">Pending</Badge>
<Badge variant="destructive">Failed</Badge>

With an icon

import { Check } from "lucide-react"

<Badge variant="secondary">
  <Check className="size-3" /> Verified
</Badge>

As a link

Render the badge as an anchor while keeping its styles:

<Badge render={<a href="/tags/new" />}>New</Badge>

Props

Prop	Type	Default	Description
variant	default | secondary | destructive | outline	default	Visual style.
render	ReactElement	—	Element to render instead of <span>.

All native attributes (className, title, aria-*, …) are forwarded.

Accessibility

• A Badge is decorative text by default. If it conveys state that is not obvious from context (for example a count), make sure the surrounding element describes it, or add an aria-label.
• Do not rely on color alone to signal status. Pair a color with a word or icon so the meaning survives for color-blind users.

When to use the Badge

Use a Badge for short, at-a-glance metadata: an order status, a stock level, a plan tier, a category tag, or an unread count. Keep the text to a word or two. For an interactive on/off control use a Toggle instead, and for a dismissible selection use a chip pattern rather than a Badge.

Used in these blocks

• Product list: sale and stock badges.
• Order history: order-status badges.
• Statistics: trend indicators.
• Pricing sections: "Most popular" tags.

Related components

Badges often sit inside a Card or a Data Table cell, or beside a Button as a count. For grouped, selectable actions use a Dropdown Menu.

FAQ

What is the shadcn badge used for?

The Badge is a small label for status, categories, counts, and tags. It is common in tables, product lists, and dashboards.

What badge variants does shadcn/ui provide?

default, secondary, destructive, and outline. Add your own color variants by extending badgeVariants.

How do I make a badge a link?

Use the render prop to render an anchor with the badge styles, or apply badgeVariants() to the link className.

How do I add a custom color like green for success?

Extend badgeVariants with a new variant, or apply Tailwind color classes such as bg-green-600 text-white for a single badge.