Bileşenler

Badge

Bir kaydın durumunu kısa bir metinle ve renkle gösterir.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Badge, bir kaydın o anki durumunu bir iki kelimeyle söyler. Varsayılan Badge nötr tonda ve sade vurgudadır; durumun anlamına göre ton seçin.

Rozet

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

export default function Default() {
  return <Badge>Rozet</Badge>;
}

Tonlar

Ton, durumun anlamını renkle destekler. Her tonun bir anlamı vardır; bir ürün içinde aynı durum hep aynı tonla gösterilir.

Nötr (neutral): Henüz bir sonuca bağlanmamış ya da özel bir anlam taşımayan durumlar: taslak, arşivlendi.
Marka (brand): Yeni ya da öne çıkarılan öğeler. Durum bildirmek için değil, dikkat çekmek için.
Bilgi (info): Süren bir süreç: inceleniyor, işleniyor.
Başarılı (success): Olumlu biten durumlar: tamamlandı, onaylandı, canlı.
Uyarı (warning): Kullanıcının dikkat etmesi ya da bir şey yapması gereken durumlar: beklemede, süresi doluyor.
Tehlike (danger): Olumsuz biten ya da hata içeren durumlar: reddedildi, başarısız.

NötrMarkaBilgiBaşarılıUyarıTehlike

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

export default function Tones() {
  return (
    <>
      <Badge tone="neutral">Nötr</Badge>
      <Badge tone="brand">Marka</Badge>
      <Badge tone="info">Bilgi</Badge>
      <Badge tone="success">Başarılı</Badge>
      <Badge tone="warning">Uyarı</Badge>
      <Badge tone="danger">Tehlike</Badge>
    </>
  );
}

Varyantlar

İki varyant vardır. Tablolarda ve listelerde sade (subtle) varyantı kullanın; aynı ekranda çok sayıda güçlü Badge göz yorar. Güçlü (bold) varyant, ekranda tek başına dikkat çekmesi gereken durumlar içindir: başarısız bir işlem ya da hesabın test ortamında olduğu.

SadeGüçlüSadeGüçlü

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

export default function Variants() {
  return (
    <>
      <Badge tone="danger">Sade</Badge>
      <Badge tone="danger" variant="bold">
        Güçlü
      </Badge>
      <Badge tone="success">Sade</Badge>
      <Badge tone="success" variant="bold">
        Güçlü
      </Badge>
    </>
  );
}

Boyutlar

İki boyut vardır. Varsayılan orta boy (md, 20 px) çoğu tablo ve liste için uygundur. Küçük boy (sm, 16 px) yoğun tablolar ve dar alanlar içindir.

KüçükOrta

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

export default function Sizes() {
  return (
    <>
      <Badge size="sm">Küçük</Badge>
      <Badge size="md">Orta</Badge>
    </>
  );
}

İkonlu

startIcon metnin önüne 12 px bir ikon ekler. İkon süs amaçlıdır: ekran okuyucu atlar, durumu metin taşır. Renk körlüğü olan kullanıcılar için durumu renkten bağımsız da ayırt ettirmek istediğinizde kullanın.

OnaylandıReddedildi

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

export default function WithIcon() {
  return (
    <>
      <Badge tone="success" startIcon={<Icon name="check" />}>
        Onaylandı
      </Badge>
      <Badge tone="danger" startIcon={<Icon name="x" />}>
        Reddedildi
      </Badge>
    </>
  );
}

Satır içinde

Badge çoğu zaman bir tablo satırında ya da liste öğesinde, ilgili kaydın yanında durur. Yazıyla aynı çizgide hizalanır ve satır yüksekliğini artırmaz (20 px).

Liste öğesiİkincil metinBaşarılı

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

export default function InContext() {
  return (
    <div className="flex w-full max-w-96 items-center justify-between gap-lg">
      <span className="type-body-md text-fg-default">Liste öğesi</span>
      <span className="flex items-center gap-md">
        <span className="type-body-md text-fg-subtle">İkincil metin</span>
        <Badge tone="success">Başarılı</Badge>
      </span>
    </div>
  );
}

Sayaç

count metin yerine bir sayı gösterir; max (varsayılan 99) değerini aşan sayı 99+ olarak görünür. dot yalnızca ton renginde küçük bir daire çizer. İkisinde de ekran okuyucunun okuyacağı anlamı label ile verin.

Canlı örnek, StorybookStorybook'ta aç

Çerçeveli

variant="outline" dolgusuzdur; kenarlık ve metin tonun rengini alır. Dolgulu rozetlerin yanında daha sakin durur.

Canlı örnek, StorybookStorybook'ta aç

Açık ve koyu mod

Badge tüm renklerini durum token’larından alır; açık ve koyu modda ayrı bir ayar gerekmez. Üstteki marka seçiciyle markayı değiştirdiğinizde iki örnek de yeni markanın renklerine geçer.

NötrMarkaBilgiBaşarılıUyarıTehlike

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

export default function Tones() {
  return (
    <>
      <Badge tone="neutral">Nötr</Badge>
      <Badge tone="brand">Marka</Badge>
      <Badge tone="info">Bilgi</Badge>
      <Badge tone="success">Başarılı</Badge>
      <Badge tone="warning">Uyarı</Badge>
      <Badge tone="danger">Tehlike</Badge>
    </>
  );
}