Badge
Durumu etiketleyen ya da bir sayı gösteren 22px yüksekliğinde hap şeklinde bir etiket. Badge'ler salt okunurdur: asla focus almaz, tıklamaya tepki vermez.
<Badge tone="success" dot>Aktif</Badge>Import
import { Badge } from "@merid/react";Örnekler
Tonlar
Her ton, koyu metinli yumuşak bir renk tonudur. Tek dolgulu ton solid'dir; onu öne çıkması gereken tek badge'e sakla.
<Badge>Nötr</Badge>
<Badge tone="accent">Accent</Badge>
<Badge tone="success">Başarılı</Badge>
<Badge tone="warning">Uyarı</Badge>
<Badge tone="danger">Hata</Badge>
<Badge tone="solid">Dolgulu</Badge>Durum noktası
dot, başa mevcut metin renginde küçük bir nokta ekler; canlı durumlar için iyi okunur.
<Badge tone="success" dot>Çevrimiçi</Badge>
<Badge tone="warning" dot>Yavaşladı</Badge>
<Badge tone="danger" dot>Erişilemiyor</Badge>Sayı
Badge içindeki sayılar tabular rakamlar kullanır; sayı değiştikçe genişlik kaymaz.
<Badge tone="accent">12</Badge>API referansı
Ref'i <span>'e iletir ve native span attribute'larını geçirir.
| Prop | Tip | Varsayılan | Açıklama |
|---|---|---|---|
tone | "neutral" | "accent" | "success" | "warning" | "danger" | "solid" | "neutral" | Renk tonu. Tek dolgulu ton solid'dir. |
dot | boolean | false | Başa mevcut metin renginde küçük bir durum noktası ekler. |
Stil verme
| Seçici | Değerler |
|---|---|
.mrd-badge | Root <span> |
.mrd-badge__dot | Baştaki durum noktası (aria-hidden) |
data-tone | neutral · accent · success · warning · danger · solid |
Badge'in component değişkeni yoktur; tonlar --mrd-*-soft ve --mrd-*-strong renk token'larına bağlanır.
Erişilebilirlik
- Badge düz metindir; içeriği belge sırasına göre okunur. Etiketlediği şeyin yanında anlamlı olduğundan emin ol.
- Nokta dekoratiftir. Asla yalnızca noktanın rengine güvenme; durumu metin söylemeli.
- Tek başına bir sayı (“12”) bağlam ister. Anlamı yakındaki metinden anlaşılmıyorsa görsel olarak gizli bir ek ekle, örneğin
12 <VisuallyHidden>okunmamış</VisuallyHidden>.
Kullanım ilkeleri
Yap
Badge metnini bir iki kelimede tut: “Taslak”, “Vadesi geçti”.
Kaçın
Badge'i buton ya da filtre çipi olarak kullanmak; etkileşimli değildir ve focus alamaz.
İlgili sayfalar
- Alert: bir cümle gerektiren durumlar için.
- VisuallyHidden: sayılara erişilebilir bir anlam vermek için.