Status Badge
İsteğe bağlı etkinlik animasyonuna sahip operasyonel durum etiketi.
StatusBadge.tsx
TamamlandıDerleniyorDoğrulandıSıradaDikkatBaşarısız
TamamlandıDoğrulandıTamamlandıİşleniyor
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/status-badge.jsonKullanım Örneği
import { StatusBadge } from "@/components/data-display/StatusBadge"
<StatusBadge status="in_progress" announce />Özellikler & Parametreler (API)
| Prop | Tür | Varsayılan | Açıklama |
|---|---|---|---|
| status | "active" | "completed" | "in_progress" | "pending" | "failed" | "sage" | "warning" | — | Semantik durum türü. |
| label | string | — | Varsayılan yerelleştirilmiş metni değiştirir. |
| size | "xs" | "sm" | "md" | "lg" | "md" | Rozet ölçeği. |
| variant | "subtle" | "outline" | "solid" | "subtle" | Görsel varyant. |
| pulse | boolean | false | Dekoratif nabız animasyonu. |
| announce | boolean | false | Dinamik değişiklikleri polite status olarak duyurur. |