Badge with Dismiss
Badge with Dismiss é um componente de feedback para React e Tailwind CSS, da biblioteca Bund UI, com licença MIT. Copia e cola no teu projeto.
Bund UI
MIT
feedback
O que é
Badge with Dismiss é um componente de feedback para React e Tailwind CSS, da biblioteca Bund UI, com licença MIT. Copia e cola no teu projeto.
Como usar
Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.
Cinco cópias grátis por mês. Sem cartão.
Precisa de
npm i lucide-react
Licença
Este componente vem de Bund UI e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.
Badge with Dismiss
"use client";
import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { XIcon } from "lucide-react";
export default function BadgeWithDismiss() {
const [badges, setBadges] = useState([
{ id: 1, label: "Next.js" },
{ id: 2, label: "Tailwind CSS" },
{ id: 3, label: "Laravel" }
]);
function removeBadge(id: number) {
setBadges((prev) => prev.filter((badge) => badge.id !== id));
}
return (
<div className="flex items-center justify-center gap-2">
{badges.map(({ id, label }) => (
<Badge
key={id}
variant="secondary"
className="flex cursor-pointer items-center gap-1 hover:opacity-80"
onClick={() => removeBadge(id)}>
{label}
<XIcon className="size-3" />
</Badge>
))}
</div>
);
}