Bileşenler

Button

Kullanıcının bir işlemi başlatmasını sağlar ve o alandaki en önemli eylemi görünür kılar.

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

Varsayılan Button birincil varyantta, nötr tonda ve orta boydadır (36 px). Kullanıcının o alanda yapması en olası işlem için kullanın.

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

export default function Default() {
  return <Button>Buton</Button>;
}

Varyantlar

Varyant, işlemin önemini anlatır. Bir alanda yalnızca bir birincil Button olur; diğer işlemler ikincil ya da üçüncül varyantla sıralanır.

Birincil (primary): Alandaki ana işlem, örneğin kaydetmek ya da göndermek. Dolgulu.
İkincil (secondary): Ana işlemin yanındaki destekleyici işlemler, örneğin dışa aktarmak. Çerçeveli.
Üçüncül (tertiary): Düşük vurgulu işlemler: vazgeçmek, kapatmak, tablo satırındaki işlemler. Dolgusuz ve çerçevesiz.

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

export default function Variants() {
  return (
    <>
      <Button variant="primary">Birincil buton</Button>
      <Button variant="secondary">İkincil buton</Button>
      <Button variant="tertiary">Üçüncül buton</Button>
    </>
  );
}

Tonlar

Ton, işlemin sonucunu anlatır. Varsayılan ton nötrdür (neutral). Silme gibi geri alınamayan işlemler tehlike tonunu (danger) alır ve her zaman bir onay adımıyla birlikte kullanılır. Tehlike tonu üç varyantla da birleşir: tablo satırındaki silme gibi düşük vurgulu işlemler için variant="tertiary" ile kullanın.

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

export default function Tones() {
  return (
    <>
      <Button tone="danger">Birincil tehlike butonu</Button>
      <Button variant="secondary" tone="danger">
        İkincil tehlike butonu
      </Button>
      <Button variant="tertiary" tone="danger">
        Üçüncül tehlike butonu
      </Button>
    </>
  );
}

Boyutlar

Üç boyut vardır. Boyut seçimi yoğunluğa ve cihaza göre yapılır, vurgu için kullanılmaz.

Küçük (sm, 32 px): Yoğun tablolar, filtre çubukları ve araç çubukları.
Orta (md, 36 px): Formlar ve sayfa başlıkları dahil çoğu yer.
Büyük (lg, 40 px): Mobil ekranların ana işlemi.

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

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

Devre dışı

Devre dışı Button tıklanamaz ve sekme sırasından çıkar; ekran okuyucu kullanıcıları onu hiç fark etmeyebilir. Bu yüzden önce işlemi etkin bırakıp gönderimde ne eksik olduğunu söylemeyi düşünün. Devre dışı bırakmanız gerekiyorsa ve nedenini yakında bir metinle açıklıyorsanız focusableWhenDisabled kullanın: Button odaklanabilir kalır, ekran okuyucu onu devre dışı olarak okur.

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

export default function Disabled() {
  return (
    <>
      <Button disabled>Devre dışı buton</Button>
      <Button variant="secondary" disabled focusableWhenDisabled>
        Devre dışı buton
      </Button>
    </>
  );
}

Tam genişlik

fullWidth Button’ı kapsayıcısının genişliğine yayar. Mobil formlarda ana işlemi başparmakla kolay ulaşılır kılar. Masaüstü sayfalarda kullanmayın; geniş ekranda Button’ın ne yaptığı okunmaz hale gelir.

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

export default function FullWidth() {
  return (
    <div className="flex w-80 max-w-full flex-col gap-sm">
      <Button size="lg" fullWidth>
        Tam genişlik buton
      </Button>
      <Button size="lg" variant="tertiary" fullWidth>
        Vazgeç
      </Button>
    </div>
  );
}

Form gönderme

Button varsayılan olarak type="button" ile çizilir, yani bir formun içinde yanlışlıkla formu göndermez. Formu gönderecek Button’a type="submit" verin. Enter tuşu formu bu Button üzerinden gönderir.

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

export default function Submit() {
  return (
    <form onSubmit={(event) => event.preventDefault()} className="flex gap-sm">
      <Button type="submit">Gönder</Button>
      <Button variant="tertiary">Vazgeç</Button>
    </form>
  );
}

Yükleniyor

loading, işlem sürerken etiketin üstünde dönen bir gösterge çizer. Button genişliğini korur, odakta kalır ve tıklamaları yok sayar; böylece bir istek iki kez gönderilmez. Gösterge, Button’ın kendi etiket rengini kullanır.

Görsel olarak yalnızca gösterge görünür. Button’ın adı etiketi olarak kalır; yükleme başladığında ekran okuyucu Button’ın yanındaki kibar bir durum bölgesinden bir kez “Yükleniyor” okur. Daha açık bir metin için loadingLabel verin (“Kaydediliyor”, “Gönderiliyor”). Varsayılan metin kütüphanenin metin kataloğundan (ui.button.loading) gelir ve dili Provider belirler: Provider yoksa Türkçe, locale="en-GB" ile İngilizce okunur. Hareketi azaltma tercihi açıksa gösterge dönmez ama görünür kalır.

Yalnızca yaklaşık bir saniyeden uzun süren işlemler için kullanın (Kullanım sekmesi). Aşağıdaki ilk Button’a tıklayınca iki saniye yükleniyor durumunda kalır.

import { Button } from '@bigbang/ui';
import { useState } from 'react';

export default function Loading() {
  const [loading, setLoading] = useState(false);
  const start = () => {
    setLoading(true);
    // Stands in for a slow request.
    setTimeout(() => setLoading(false), 2000);
  };
  return (
    <>
      <Button loading={loading} onClick={start}>
        Buton
      </Button>
      <Button variant="secondary" loading>
        Buton
      </Button>
    </>
  );
}

Başarı

success, işlem bittiğinde etiketin üstünde bir onay işareti gösterir. İşaret %60 boyuttan büyüyerek 240 ms’de belirir ve durur; döngüye girmez. Ekran okuyucu aynı durum bölgesinden bir kez “Tamamlandı” okur; daha açık bir metin için successLabel verin (“Kaydedildi”). success değerini işlem bitince açın ve motionValues.motion['feedback-hold'] (2000 ms) sonra kapatın. loading ile birlikte verilirse gösterge önceliklidir. Hareketi azaltma tercihi açıksa işaret büyümez, yalnızca belirir.

Aşağıdaki Button’a tıklayınca önce yükleniyor, sonra başarı durumunu gösterir.

import { Button, motionValues } from '@bigbang/ui';
import { useState } from 'react';

export default function Success() {
  const [state, setState] = useState<'idle' | 'loading' | 'success'>('idle');
  const save = () => {
    setState('loading');
    // Stands in for a request; the check mark stays for the feedback hold, then the label returns.
    setTimeout(() => {
      setState('success');
      setTimeout(() => setState('idle'), motionValues.motion['feedback-hold']);
    }, 1200);
  };
  return (
    <Button loading={state === 'loading'} success={state === 'success'} successLabel="Kaydedildi" onClick={save}>
      Kaydet
    </Button>
  );
}

İkonlar

startIcon etiketten önce, endIcon etiketten sonra bir ikon gösterir. Boyut Button boyutundan gelir: küçük ve orta boyda 16 px, büyük boyda 20 px. İkon ile etiket arasındaki boşluk sabittir. SVG’de currentColor kullanırsanız ikon etiketle aynı rengi alır.

İkonlar süs amaçlıdır: ekran okuyucu onları atlar, anlamı etiket taşır. Bu sürümde ikon etiketin yerini tutmaz; her Button görünür bir etiketle kullanılır. Paket ikon seti içermez, uygulamanın kendi SVG ikonlarını verin.

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

export default function Icons() {
  return (
    <>
      <Button variant="secondary" size="sm" startIcon={<Icon name="download" />}>
        Önde ikon
      </Button>
      <Button startIcon={<Icon name="plus" />}>Önde ikon</Button>
      <Button size="lg" endIcon={<Icon name="arrow-right" />}>
        Sonda ikon
      </Button>
    </>
  );
}

Açık ve koyu mod

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

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

export default function Variants() {
  return (
    <>
      <Button variant="primary">Birincil buton</Button>
      <Button variant="secondary">İkincil buton</Button>
      <Button variant="tertiary">Üçüncül buton</Button>
    </>
  );
}