Shadcn Badge

A badge is a compact label for status, a count, or a tag. It is a span. Use render={<a href="…" />} for a link. Keep the text to a word or two.

Usage

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

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

variant is default, secondary, destructive, outline, ghost, or link. render={<a href="…" />} makes it a link.

Composition

render={<a href="…" />} merges the badge onto the link. Switch to Radix UI for asChild.

Variants

variant picks the color. Ghost is quiet; destructive is the red one.

With Icon

data-icon="inline-start" or data-icon="inline-end" so the icon stays on the reading-start or reading-end side.

With Spinner

Same data-icon attributes on Spinner. Pair it with a word — Deleting, Generating — not a bare spinner.

Link

render={<a href="…" />} plus the label as children. Hover comes from the [a&] selectors on the variants.

Custom Colors

Class names on Badge — bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300. Leave variant at default.

RTL

Wrap with DirectionProvider and dir="rtl". Keep data-icon="inline-start" / inline-end so icons flip with the text.

API

Notes

Keep the label to a word or two. A sentence belongs in an Alert.

With other components

Questions

Related