LivaBadge
Durum, etiket ve sayaç göstermek için kullanılan hafif bir rozet bileşeni.
span tabanlıdır; variant ile anlamsal renk, stylingMode ile dolgu stili,
size ile boyut seçilir. İçerik text prop'u ya da children ile verilir.
import { LivaBadge } from "@dataliva/livalib";
Varyantlar
variant prop'u beş anlamsal renge karşılık gelir: primary, secondary,
success, warning, danger.
Varyantlar
Önizleme yükleniyor…
Stil modları
stylingMode rozetin dolgusunu belirler: contained dolu arka plan,
outlined çerçeveli, light soluk arka plan, text yalnızca renkli metin.
Stil modları (stylingMode)
Önizleme yükleniyor…
Kombinasyonlar
Beş varyant ve dört stil modu serbestçe birleştirilebilir.
Varyant × stil modu kombinasyonları
Önizleme yükleniyor…
Boyutlar
Boyutlar
Önizleme yükleniyor…
| Prop | Tip | Varsayılan |
|---|---|---|
text | string | — |
variant | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'primary' |
stylingMode | 'text' | 'outlined' | 'contained' | 'light' | 'contained' |
size | 'small' | 'medium' | 'large' | 'medium' |
width | string | 'fit-content' |
maxWidth | string | — |
className | string | — |
children | ReactNode | — |
text verilmezse children render edilir. Ayrıca
React.HTMLAttributes<HTMLSpanElement>'ten gelen tüm prop'lar
(ör. onClick, style, title) desteklenir.