Badge

Preview

BadgePrimarySecondaryDangerOutline
Verified89920+
import { Badge } from "@/registry/components/badge/react/badge";
import { BadgeCheckIcon } from "lucide-react";


export function BadgeDemo() {
    return (
        <div className="flow">
            <div className="cluster gap-2xs">
                <Badge>Badge</Badge>
                <Badge data-variant="primary">Primary</Badge>
                <Badge data-variant="secondary">Secondary</Badge>
                <Badge data-variant="danger">Danger</Badge>
                <Badge data-variant="outline">Outline</Badge>
            </div>
            <div className="cluster gap-2xs">
                <Badge>
                    <BadgeCheckIcon />
                    Verified
                </Badge>
                <Badge className="tabular-nums">8</Badge>
                <Badge data-variant="danger" className="tabular-nums">
                    99
                </Badge>
                <Badge data-variant="outline" className="tabular-nums">
                    20+
                </Badge>
            </div>
        </div>
    );
}

Installation

You can add the badge component in two ways:

  1. During project initialization:
pnpm dlx make-sugarcube@latest init
npx make-sugarcube@latest init
yarn make-sugarcube@latest init
bunx --bun make-sugarcube@latest init

Then select the badge component when prompted.

  1. After initialization:
pnpm dlx make-sugarcube@latest components badge --framework react
npx make-sugarcube@latest components badge --framework react
yarn make-sugarcube@latest components badge --framework react
bunx --bun make-sugarcube@latest components badge --framework react

What’s included

When you add the button component, you get:

  • badge.tsx - The React component implementation
  • badge.css - The base styles for the badge
  • @clsx - The clsx utility for conditional classes
import { Slot } from "@radix-ui/react-slot";
import cn from "clsx";


function Badge({
    className,
    asChild = false,
    ...props
}: React.ComponentProps<"span"> & { asChild?: boolean }) {
    const Comp = asChild ? Slot : "span";
    return <Comp data-slot="badge" className={cn("badge", className)} {...props} />;
}
export { Badge };
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    white-space: nowrap;
    flex-shrink: 0;
    overflow: hidden;
    background-color: var(--badge-bg);
    color: var(--badge-fg);
    border-radius: var(--badge-radius);
    border-style: var(--badge-border-style);
    border-width: var(--badge-border-width);
    border-color: var(--badge-border-color);
    padding: var(--badge-padding-block) var(--badge-padding-inline);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    gap: var(--badge-gap);
    transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

Examples

:::note The following examples show how to use data attributes for variants. This is just one possible approach. See the principles section for more information on how to approach component variants. :::