Componentfeedback

Badge

Micro status pill with subtle entrance transition.

Preview

Live Preview

LIVE ADMISSIONSOLD OUTSTANDBYBALCONY

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add badge

Or install the full npm package:

npm install bigbullui

Usage

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

<Badge>New</Badge>
<Badge variant="accent">Accent</Badge>

Source code

badge.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

import * as React from "react";
import { cn } from "./lib/utils";

type Variant = "default" | "secondary" | "outline" | "accent";

export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & { variant?: Variant };

const variants: Record<Variant, string> = {
  default: "border-2 border-dashed border-foreground bg-transparent text-foreground",
  secondary: "border-transparent bg-secondary text-secondary-foreground",
  outline: "border border-foreground/60 text-foreground",
  accent: "border-transparent bg-accent text-accent-foreground",
};

function Badge({ className, variant = "default", ...props }: BadgeProps) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1 rounded-sm border px-2.5 py-0.5 font-mono text-[11px] font-bold uppercase tracking-[0.15em] animate-[fade-in-up_0.3s_ease-out_both]",
        variants[variant],
        className
      )}
      {...props}
    />
  );
}

export { Badge };

Props

Prop	Type	Description
variant	"default" \| "secondary" \| "outline" \| "accent"	Visual style.