Design · Components · Display

Badge

A small label component for displaying status, categories, or metadata.

Radix UI Slot (Radix styles)Base UI useRender (base styles)
OutlineSecondaryMutedGhostInfoWarningSuccessDestructive

Installation

npx shadcn@latest add @assistant-ui/badge

The @assistant-ui namespace resolves the Radix or Base UI flavor from your project's style through the style-aware registry entry in components.json. Without that entry, add by direct URL instead:

npx shadcn@latest add https://r.assistant-ui.com/base/badge.json

Usage

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

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

Examples

Variants

Use the variant prop to change the visual style.

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

With icons

Badges automatically style SVG icons.

SuccessFailedPending

Compose with render in Base UI or asChild in Radix to render a badge as a link.

GitHubnpm

Animated

Combine the badge with CSS transitions for state changes.

LoadingMission Success

API Reference

Badge

BadgeProps
variant : "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" = "default"

The visual style of the badge.

render ?: ReactElement | function

Base UI: compose as a different element.

asChild : boolean = false

Radix: merge props with a child element.

className ?: string

Additional CSS classes.

Style variants

ExportDescription
badgeVariantsStyles for the badge component.
import { badgeVariants } from "@/components/ui/badge";

<span className={badgeVariants({ variant: "secondary" })}>
  Custom badge
</span>