Badge

Compact status labels in neutral, sky and outline variants, with an optional glowing status dot.

ReactTailwind CSSTypeScriptData displayMIT · Free

LiveDraftArchived

components/ui/badge.tsx

import * as React from "react";

type Variant = "neutral" | "sky" | "outline";

const variants: Record<Variant, string> = {
  neutral: "bg-white/[.06] text-zinc-300",
  sky: "border border-sky-300/30 bg-sky-300/10 text-sky-300",
  outline: "border border-white/15 text-zinc-400",
};

export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  variant?: Variant;
  dot?: boolean;
}

export function Badge({ variant = "neutral", dot = false, className = "", children, ...props }: BadgeProps) {
  return (
    <span
      className={[
        "inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium",
        variants[variant],
        className,
      ].join(" ")}
      {...props}
    >
      {dot && <span className="size-1.5 rounded-full bg-current shadow-[0_0_8px_currentColor]" />}
      {children}
    </span>
  );
}

Installation

Install with the shadcn CLI.

$ npx shadcn@latest add https://niceui.dev/r/badge.json

Or copy the source manually into components/ui/badge.tsx. No extra dependencies.

Usage

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

export default function Example() {
  return (
    <div className="flex gap-1.5">
      <Badge variant="sky" dot>Live</Badge>
      <Badge>Draft</Badge>
      <Badge variant="outline">Archived</Badge>
    </div>
  );
}

For AI assistants

This page is also available as Markdown and as a shadcn registry item. Use Copy prompt to hand the full source to Claude, Cursor or v0.