Skip to content
Prisma UI

Badge

A compact label component for status indicators, tags, and categories. Built on Radix UI with support for variants, sizes, and visual effects.

Installation

Section titled “Installation”
Terminal window
npx shadcn@latest add https://joaocarmassi.com/components/badge.json

The direct URL serves the radix-vega variant. The Badge is style-aware — its sizes, radius, and type scale differ per shadcn style. To let the CLI pick the variant that matches your project’s theme automatically, register the @prisma namespace once (see Styles & Themes) and install by name:

Terminal window
npx shadcn@latest add @prisma/badge

Import

Section titled “Import”
import { Badge } from '@/components/ui/badge';

Variants

Section titled “Variants”

The variant prop controls the visual style of the badge.

DefaultSecondaryDestructiveOutlineGhostLink
<Badge variant="default">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>
Variant Description
default Primary badge with solid background
secondary Subtle, less prominent badge
destructive For errors or dangerous states
outline Bordered badge with transparent fill
ghost No background, visible on hover (as link)
link Styled as a text link

Sizes

Section titled “Sizes”

The size prop controls the dimensions of the badge.

DefaultLarge
<Badge size="default">Default</Badge>
<Badge size="lg">Large</Badge>

Icon Sizes

Section titled “Icon Sizes”

For icon-only badges, use the icon size variants.

import { Star, X, Check } from 'lucide-react';
<Badge size="icon"><Star /></Badge>
<Badge size="icon-lg"><Star /></Badge>
<Badge variant="destructive" size="icon"><X /></Badge>
<Badge variant="secondary" size="icon"><Check /></Badge>
Size Description
default Standard compact size
lg Larger with more padding
icon Small circle for icons
icon-lg Larger circle for icons

Effects

Section titled “Effects”

The effect prop adds visual animations to the badge.

Shine

Section titled “Shine”

A continuous animated shine sweeping across the badge.

Shine

Error

Secondary

<Badge effect="shine">Shine</Badge>
<Badge variant="destructive" effect="shine">Error</Badge>
<Badge variant="secondary" effect="shine">Secondary</Badge>

Pulsating

Section titled “Pulsating”

A continuous pulsating glow effect.

Live

Alert

Active

<Badge effect="pulsating">Live</Badge>
<Badge variant="destructive" effect="pulsating">Alert</Badge>

Rainbow

Section titled “Rainbow”

An animated rainbow gradient border effect.

Rainbow

Rainbow Large

<Badge effect="rainbow">Rainbow</Badge>
<Badge size="lg" effect="rainbow">Rainbow Large</Badge>
Effect Description
shine Continuous animated shine
pulsating Continuous pulsating glow
rainbow Animated rainbow gradient border

With Icons

Section titled “With Icons”

Badges can include icons as children alongside text.

Approved

Rejected

Pending

Info

Trending

Notifications

import { Check, X, Clock, Info, Flame, Bell } from 'lucide-react';
<Badge><Check /> Approved</Badge>
<Badge variant="destructive"><X /> Rejected</Badge>
<Badge variant="secondary"><Clock /> Pending</Badge>
<Badge variant="outline"><Info /> Info</Badge>
<Badge size="lg"><Flame /> Trending</Badge>

Use Cases

Section titled “Use Cases”

Common real-world uses for badges.

v1.0.0BetaDeprecatedTypeScript

New

Critical

Featured

import { AlertTriangle, Zap } from 'lucide-react';
<Badge variant="default">v1.0.0</Badge>
<Badge variant="secondary">Beta</Badge>
<Badge variant="destructive">Deprecated</Badge>
<Badge variant="outline">TypeScript</Badge>
<Badge variant="default" effect="shine">New</Badge>
<Badge variant="destructive" effect="pulsating"><AlertTriangle /> Critical</Badge>
<Badge variant='secondary'><Zap /> Featured</Badge>

As Child

Section titled “As Child”

Use asChild to render badge styles on a different element, such as an anchor tag.

<Badge asChild variant='outline'>
  <a href='https://github.com' target='_blank' rel='noopener noreferrer'>
    GitHub
  </a>
</Badge>

API Reference

Section titled “API Reference”
Prop Type Default Description
variant "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" "default" Visual style of the badge
size "default" | "lg" | "icon" | "icon-lg" "default" Size of the badge
effect "shine" | "pulsating" | "rainbow" undefined Visual effect applied to the badge
asChild boolean false Renders as child element via Radix Slot
className string undefined Additional CSS classes

Theme styles

Section titled “Theme styles”

The Badge ships in a dedicated variant for each supported shadcn style. Installed through the @prisma namespace, the CLI delivers the one matching the style in your components.json — same API, different sizing, radius, and type scale:

radix-vega
DefaultOutlineLarge
radix-nova
DefaultOutlineLarge
radix-maia
DefaultOutlineLarge
radix-lyra
DefaultOutlineLarge
radix-mira
DefaultOutlineLarge
radix-luma
DefaultOutlineLarge
radix-rhea
DefaultOutlineLarge
radix-sera
DefaultOutlineLarge

See Styles & Themes for setup and the full list of supported styles.