Badge

A compact label for status or category.

Overview

Badge is an inline label. It does not handle clicks. Compose it with a link, a spinner, or an icon when the label needs more than text.

className is merged after the variant, so Tailwind utilities can change the color without a new prop.

Preview

Badge

Customize

Variant
Icon
Text

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add badge

Usage

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

export function Plan() {
  return <Badge>Pro</Badge>;
}

Examples

External link

The link variant is visual. Wrap it in an anchor when the label should navigate.

Documentation

Processing

Put Spinner inside a badge when a status is still in progress. The badge text is the accessible name, so the spinner label stays empty.

Processing

Custom color

Badge supplies the shape and type size. className replaces the color with your own Tailwind classes.

Beta

Icon on the left

A leading icon can name the offer the badge describes.

Claim offer

Icon on the right

A trailing icon can show the action the label refers to.

Bookmark

Variants

Default, secondary, destructive, outline, ghost, and link cover status, quiet labels, and link-like text.

DefaultSecondaryDestructiveOutlineGhostLink

In practice

An issue board uses Badge variants as filters and row status labels.

AllOpenIn progressDone

  • Keyboard focus escapes Dialog

    Open

  • Table scrolls on mobile

    In progress

  • Toast dismiss race

    Blocked

  • Docs install path

    Done

API

Other attributes for the underlying element are passed through.

NameTypeDefaultDescription
variant"default" | "secondary" | "destructive" | "outline" | "ghost" | "link""default"Visual style.
classNamestring—Merged onto the badge. Use it to extend the base styles with Tailwind classes.

Accessibility

The text inside the badge is its name. It is not a button. Do not use color alone: the label should say the status.

Span attributes are passed through. When the badge sits inside a link, the link is the control and the badge stays presentational.