Loading...
Loading...
A badge with a close button that removes it from view with a smooth fade-out animation.
import { useState } from "react";
interface BadgeDismissibleProps {
label: string;
variant?: "gray" | "blue" | "green" | "red" | "purple";
onDismiss?: () => void;
}
const variantStyles: Record<string, string> = {
gray: "bg-gray-100 text-gray-700 border-gray-200",
blue: "bg-blue-50 text-blue-700 border-blue-200",
green: "bg-emerald-50 text-emerald-700 border-emerald-200",
red: "bg-red-50 text-red-700 border-red-200",
purple: "bg-purple-50 text-purple-700 border-purple-200",
};
export function BadgeDismissible({ label, variant = "gray", onDismiss }: BadgeDismissibleProps) {
const [visible, setVisible] = useState(true);
if (!visible) return null;
const dismiss = () => {
setVisible(false);
onDismiss?.();
};
return (
<span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold border transition-opacity duration-300 ${variantStyles[variant]}`}>
{label}
<button onClick={dismiss} className="shrink-0 rounded-full hover:bg-black/5 p-0.5 transition-colors" aria-label={`Remove ${label}`}>
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</span>
);
}