Rozet

22 · UI öğeleri

Durum, kategori ya da sayı göstermek için küçük, yuvarlak etiket. Tablo hücrelerinde, kart başlıklarında ve düğmelerin içinde kullanılır.

acun:badge

Varyantlar

Renk variant ile seçilir: butonlarla aynı palet adları. Verilmezse gri secondary kullanılır. Durumlar için success, warning, danger ve info vardır; bir durum bildirmeyen, ana renkte öne çıkması gereken etiketler ("Yeni" gibi) için primary kullanın. solid rozeti rengin kendisiyle doldurur ve yazıyı beyaz yapar. Aynı ekranda aynı durumu hep aynı renkle gösterin (ör. Aktif her yerde success). Eski adlar da çalışır: brand = primary, neutral = secondary.

CANLI ÖRNEK

<div class="flex flex-wrap items-center gap-2">
    <acun:badge>Taslak</acun:badge>
    <acun:badge variant="success">Aktif</acun:badge>
    <acun:badge variant="warning">Beklemede</acun:badge>
    <acun:badge variant="danger">Pasif</acun:badge>
    <acun:badge variant="info">Bilgilendirildi</acun:badge>
    <acun:badge variant="primary">Yeni</acun:badge>
    <acun:badge variant="dark">Arşiv</acun:badge>
</div>
<div class="mt-3 flex flex-wrap items-center gap-2">
    <acun:badge solid>Taslak</acun:badge>
    <acun:badge variant="success" solid>Aktif</acun:badge>
    <acun:badge variant="warning" solid>Beklemede</acun:badge>
    <acun:badge variant="danger" solid>Pasif</acun:badge>
    <acun:badge variant="info" solid>Bilgilendirildi</acun:badge>
    <acun:badge variant="primary" solid>Yeni</acun:badge>
    <acun:badge variant="dark" solid>Arşiv</acun:badge>
</div>

Prop	Değerler
`variant`	primary \| secondary \| success \| danger \| warning \| info \| dark
`solid`	true \| false (dolu, beyaz yazı)

İkon ve nokta ile

Rozet içeriği yan yana dizilir, bu yüzden metnin önüne küçük bir acun:icon ya da renkli bir nokta koyabilirsiniz. Nokta, rengi ayırt edemeyen kullanıcılar için metnin yerine geçmez; durumu her zaman yazıyla da belirtin.

CANLI ÖRNEK

<div class="flex flex-wrap items-center gap-2">
    <acun:badge variant="success"><acun:icon name="check-circle" size="3.5" />Teslim edildi</acun:badge>
    <acun:badge variant="danger"><acun:icon name="x-mark" size="3.5" />İptal edildi</acun:badge>
    <acun:badge variant="success"><span class="size-1.5 rounded-full bg-current"></span>Çevrimiçi</acun:badge>
    <acun:badge><span class="size-1.5 rounded-full bg-current"></span>Çevrimdışı</acun:badge>
</div>

Sayaç olarak

Bekleyen iş ya da okunmamış bildirim sayısını düğmenin veya başlığın yanında göstermek için rozeti metnin içine yerleştirin.

CANLI ÖRNEK

<div class="flex flex-wrap items-center gap-3">
    <acun:button variant="white">Onay bekleyenler <acun:badge variant="danger">12</acun:badge></acun:button>
    <h3 class="flex items-center gap-2 text-sm font-semibold">Yeni siparişler <acun:badge variant="primary">4</acun:badge></h3>
</div>

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`variant`	`secondary`	primary · secondary · success · danger · warning · info · dark (brand = primary, neutral = secondary); tanımsız değer secondary olur
`solid`	`false`	Rozeti rengin kendisiyle doldurur, yazı beyaz olur

Slot'lar: varsayılan: rozet metni (ikon ya da nokta eklenebilir).