Badge
Small status pill in five colors, with a crossfade for when its variant changes.
NeutralAccentSuccessWarningDestructive
import { Badge } from "@/components/motion/badge";
export function BadgePreview() {
return (
<div className="flex flex-wrap items-center justify-center gap-2">
<Badge>Neutral</Badge>
<Badge variant="accent">Accent</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="destructive">Destructive</Badge>
</div>
);
}
// easeui.dev/components/motion/badge
import type { HTMLAttributes } from "react";
import { cn } from "@/lib/utils";
export type BadgeVariant = "neutral" | "accent" | "success" | "warning" | "destructive";
export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
/** Color treatment. Default "neutral". */
variant?: BadgeVariant;
}
const VARIANT_CLASS: Record<BadgeVariant, string> = {
neutral: "bg-muted text-muted-foreground shadow-[0_0_0_1px_var(--border)]",
accent: "bg-accent/15 text-accent",
success: "bg-success/15 text-success",
warning: "bg-warning/15 text-warning",
destructive: "bg-destructive/15 text-destructive",
};
/** A small status pill. Crossfades color when its variant changes, such as pending to success. */
export function Badge({ variant = "neutral", className, ...props }: BadgeProps) {
return (
<span
className={cn(
"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium transition-colors duration-150 ease-out",
VARIANT_CLASS[variant],
className,
)}
{...props}
/>
);
}
Installation
$ bunx --bun shadcn add @easeui/badge
- 1
Set up the theme tokens
Do this once per project. Follow the theme setup or skip it if you already ran shadcn init.
- 2
Install the dependencies
terminal npm install clsx tailwind-merge - 3
Add the source files
components/motion/badge.tsx // easeui.dev/components/motion/badge import type { HTMLAttributes } from "react"; import { cn } from "@/lib/utils"; export type BadgeVariant = "neutral" | "accent" | "success" | "warning" | "destructive"; export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> { /** Color treatment. Default "neutral". */ variant?: BadgeVariant; } const VARIANT_CLASS: Record<BadgeVariant, string> = { neutral: "bg-muted text-muted-foreground shadow-[0_0_0_1px_var(--border)]", accent: "bg-accent/15 text-accent", success: "bg-success/15 text-success", warning: "bg-warning/15 text-warning", destructive: "bg-destructive/15 text-destructive", }; /** A small status pill. Crossfades color when its variant changes, such as pending to success. */ export function Badge({ variant = "neutral", className, ...props }: BadgeProps) { return ( <span className={cn( "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium transition-colors duration-150 ease-out", VARIANT_CLASS[variant], className, )} {...props} /> ); }lib/utils.ts import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) }
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant? | "neutral" | "success" | "warning" | "destructive" | "accent" | neutral | Color treatment. Default "neutral". |
Updated