Badge
Durum ve kategori bilgileri için kompakt semantik etiketler.
Badge.tsx
Semantik Durum Varyantları
VarsayılanİkincilYayındaBeklemedeHata UyarısıBilgilendirmeTaslak Çerçeve
Kaldırılabilir Etiketler & Şekiller
Next.jsTailwind v4TypeScript
Tıklanabilir Filtre Rozetleri
★ Favorilere EkleFiltrele ↓
Kurulum
shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:
$
npx shadcn@latest add https://ui.cagriozay.com.tr/r/badge.jsonKullanım Örneği
import { Badge } from "@/components/ui/Badge"
<Badge variant="success" dot pulse>Yayında</Badge>
<Badge variant="outline" shape="rounded" onRemove={() => {}}>Next.js</Badge>Özellikler & Parametreler (API)
| Prop | Tür | Varsayılan | Açıklama |
|---|---|---|---|
| variant | "default" | "secondary" | "success" | "warning" | "danger" | "info" | "outline" | "ghost" | "default" | Rozetin semantik renk varyantı. |
| size | "xs" | "sm" | "md" | "lg" | "md" | Boyut seçeneği. |
| shape | "pill" | "rounded" | "square" | "pill" | Geometrik köşe biçimi. |
| dot | boolean | false | Durum belirten renkli nokta gösterir. |
| pulse | boolean | false | Noktaya canlı yanıp sönme animasyonu ekler. |
| icon | ReactNode | — | Metnin soluna eklenecek özel ikon. |
| rightIcon | ReactNode | — | Metnin sağına eklenecek özel ikon. |
| interactive | boolean | false | Rozeti fare ve klavye ile etkinleştirilebilir hale getirir. |
| onRemove | () => void | — | Kaldırma düğmesini gösterir ve seçildiğinde çağrılır. |
| removeLabel | string | "Kaldır" | Kaldırma düğmesinin erişilebilir etiketi. |