Componentfeedback0.49 KB gzipZero dependencies

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

Open in StackBlitz

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

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

Usage guidance

Use Badge when a ticket stub surface needs Micro status pill with subtle entrance transition. Keep props minimal and prefer composition with sibling stubs.

Avoid Badge for long form flows or dense data grids where a dedicated layout block fits better.

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.