Badge

Small status indicators and labels for displaying notifications, statuses, and categories with multiple color variants.

Basic Usage

Default BadgePrimarySuccessWarningErrorOutline

Color Variants

DefaultPrimarySuccessWarningErrorOutline

Content Examples

New✓ Verified⚠ Beta✗ Deprecated123

Status Indicators

ActivePendingInactiveDraftPublished

Notification Badges

99+5!✓

In Context

User ProfileVerified

Feature FlagBeta

API StatusDown

Messages3

Badge Component

tsx

1import { HTMLAttributes } from "react";
2import { cn } from "@/lib/cn";
3
4interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
5  variant?: "default" | "primary" | "success" | "warning" | "error" | "purple";
6}
7
8export default function Badge({
9  className,
10  variant = "default",