Badge

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { Badge } from '@bigbang/ui';

Kaynak

Badge.tsx

Storybook

Badge · Playground

Badge, @bigbang/ui paketindedir. Kurulum ve stil dosyaları Button ile aynıdır; ayrıntılar için Button kod sekmesine bakın.

import { Badge } from '@bigbang/ui';

<Badge tone="success">Başarılı</Badge>;

Özellikler

tone

Açıklama

Durumun anlamı. Renk yalnızca metni destekler; durumu metin taşır. violet, teal ve pink durum anlamı taşımayan kategori renkleridir.

Tür

'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger' | 'violet' | 'teal' | 'pink'

Varsayılan

'neutral'

variant

Açıklama

Vurgu düzeyi. Tablolar ve listeler için subtle; dikkat çekmesi gereken tek durum için bold; dolgulu rozetlerin yanında daha sakin bir görünüm için outline.

Tür

'subtle' | 'bold' | 'outline'

Varsayılan

'subtle'

size

Açıklama

Yükseklik ve yatay iç boşluk: 16 ve 20 px. Yoğun tablolarda sm kullanın.

Tür

'sm' | 'md'

Varsayılan

'md'

startIcon

Açıklama

Metinden önce gelen 12 px süs ikonu öğesi. Ekran okuyucu atlar, anlamı metin taşır.

Tür

ReactElement

count

Açıklama

Metin yerine gösterilen sayı, ör. okunmamış öğeler. max değerini aşan sayı 99+ olarak görünür. Ekran okuyucular için label verin.

Tür

number

max

Açıklama

Sayı olarak gösterilen en büyük değer; daha büyüğü max+ olarak görünür.

Tür

number

Varsayılan

99

dot

Açıklama

Yalnızca ton renginde küçük, dolu bir daire gösterir, ör. yeni bir şeyi işaretlemek için. Ekran okuyucular için label verin.

Tür

boolean

Varsayılan

false

label

Açıklama

count ya da dot rozetinin ekran okuyucuya okunan anlamı, ör. "12 okunmamış bildirim". Görünen sayı ya da nokta ekran okuyucudan gizlenir.

Tür

string

className

Açıklama

Yalnızca yerleşim için: dış boşluk, hizalama. Renk ve boyutu değiştirmek için kullanmayın.

Tür

string

children

Açıklama

Durum metni. Bir ya da iki kelime. count ya da dot ile gerekmez.

Tür

ReactNode

Bunların dışında yerel <span> öznitelikleri (id, title, aria-*) doğrudan iletilir. ref, <span> öğesine bağlanır.

Veri öznitelikleri

• data-component="badge": kök <span> üzerinde.
• data-part="icon": startIcon verildiğinde ikon sarmalayıcısı üzerinde.

Durumu bir veri alanından seçmek

Durum ile ton arasındaki eşleme bir yerde tanımlanmalı; her ekran kendi eşlemesini yazarsa aynı durum farklı renklerde görünür.

import { Badge, type BadgeProps } from '@bigbang/ui';

const statuses: Record<string, { tone: BadgeProps['tone']; label: string }> = {
  approved: { tone: 'success', label: 'Onaylandı' },
  pending: { tone: 'warning', label: 'Beklemede' },
  failed: { tone: 'danger', label: 'Başarısız' },
};

export function StatusBadge({ status }: { status: keyof typeof statuses }) {
  const { tone, label } = statuses[status];
  return <Badge tone={tone}>{label}</Badge>;
}