Installation
Usage
import { useState } from "react";
import BadgeRemovable from "@/components/ruixen/badge-removable";
export default function MyTags() {
const [tags, setTags] = useState(["React", "TypeScript", "Tailwind"]);
const handleRemove = (tag: string) => {
setTags((prev) => prev.filter((t) => t !== tag));
};
return (
<div className="flex gap-2">
{tags.map((tag) => (
<BadgeRemovable key={tag} onRemove={() => handleRemove(tag)}>
{tag}
</BadgeRemovable>
))}
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | "Badge" | The badge text content |
variant | "default" | "secondary" | "destructive" | "outline" | "secondary" | The badge variant style |
onRemove | () => void | - | Callback when remove is clicked |
className | string | - | Additional CSS classes |