Button

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

Button.tsx

Storybook

Button · Playground

Button, @bigbang/ui paketindedir. Uygulama bu paketi ve token paketini çalışma alanından alır:

package.json

{
  "dependencies": {
    "@bigbang/tokens": "workspace:*",
    "@bigbang/ui": "workspace:*"
  }
}

Uygulamanın giriş stil dosyası bileşen stillerini ve kullanılacak marka dosyalarını içe aktarır. Marka ve mod, sayfanın kök öğesindeki iki öznitelikle seçilir:

app.css

@import '@bigbang/ui/styles.css';
@import '@bigbang/tokens/css/neutral-light.css';
@import '@bigbang/tokens/css/neutral-dark.css';

<html data-brand="neutral" data-theme="light">

Özellikler

variant

Açıklama

İşlemin önemi. Bir alanda yalnızca bir primary Button olur; tertiary dolgusuz ve çerçevesizdir. glass ve glass-prominent medya ya da hareketli bir arka plan üstündeki kontroller içindir: cam bir Provider olmadan da camdır, camın opak çizildiği yerde secondary ve primary gibi görünür. Danger tonu yoktur.

Tür

'primary' | 'secondary' | 'tertiary' | 'glass' | 'glass-prominent'

Varsayılan

'primary'

tone

Açıklama

İşlemin sonucu. danger, silen ya da geri alınamayan bir işlemi gösterir; bir onay adımıyla birlikte kullanın.

Tür

'neutral' | 'danger'

Varsayılan

'neutral'

size

Açıklama

Yükseklik ve yatay iç boşluk: 24, 32, 36 ve 40 px. xs yoğun tablolardaki hücre içi işlemler içindir.

Tür

'xs' | 'sm' | 'md' | 'lg'

Varsayılan

'md'

fullWidth

Açıklama

Button'ı kapsayıcısının genişliğine yayar. Mobil formlar ve tek eylemli adımlar içindir.

Tür

boolean

Varsayılan

false

type

Açıklama

Form davranışı. Formu gönderecek Button için 'submit' verin.

Tür

'button' | 'submit' | 'reset'

Varsayılan

'button'

disabled

Açıklama

Etkileşimi kapatır ve Button'ı sekme sırasından çıkarır.

Tür

boolean

Varsayılan

false

focusableWhenDisabled

Açıklama

Devre dışıyken de odaklanabilir kalır: disabled yerine aria-disabled yazılır. Nedeni yakında bir metinle açıklıyorsanız kullanın.

Tür

boolean

Varsayılan

false false

render

Açıklama

Button'ı başka bir öğe olarak çizer, ör. bağlantı. Öğe <button> değilse nativeButton={false} verin.

Tür

ReactElement | ComponentRenderFn<HTMLProps, ButtonState>

nativeButton

Açıklama

render ile verilen öğenin yerel bir <button> olup olmadığı.

Tür

boolean

Varsayılan

true true

className

Açıklama

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

Tür

string

children

Açıklama

Etiket. Kısa bir fiil öbeği olmalı.

Tür

ReactNode

loading

Açıklama

İşlem sürerken etiketin üstünde dönen bir gösterge çizer ve tıklamaları yok sayar. Button genişliğini korur ve odaklanabilir kalır. Yaklaşık bir saniyeden uzun süren işlemler için kullanın.

Tür

boolean

Varsayılan

false

loadingLabel

Açıklama

loading başladığında ekran okuyucuya bir kez okunan metin, ör. "Kaydediliyor". Button adı olarak etiketini korur. Verilmezse kütüphane metni ui.button.loading, Provider dilinde okunur ("Yükleniyor" ya da "Loading").

Tür

string

success

Açıklama

İşlem bittiğinde etiketin üstünde bir onay işareti gösterir ve bunu bir kez duyurur. İşlem başarılı olunca açın, motionValues.motion['feedback-hold'] (2000 ms) sonra kapatın. İkisi birlikte verilirse loading önceliklidir.

Tür

boolean

Varsayılan

false

successLabel

Açıklama

success başladığında ekran okuyucuya bir kez okunan metin, ör. "Kaydedildi". Verilmezse kütüphane metni ui.button.success okunur ("Tamamlandı" ya da "Done").

Tür

string

startIcon

Açıklama

Etiketten önce gelen süs ikonu öğesi; boyutu size ile belirlenir. Ekran okuyucu atlar, anlamı etiket taşır.

Tür

ReactElement

endIcon

Açıklama

Etiketten sonra gelen süs ikonu öğesi; boyutu size ile belirlenir. Ekran okuyucu atlar, anlamı etiket taşır.

Tür

ReactElement

Bunların dışında yerel <button> öznitelikleri ve olayları (onClick, aria-*, form, name) doğrudan iletilir. ref, çizilen öğeye bağlanır.

Veri öznitelikleri

Öznitelik	Ne zaman
data-disabled	Button devre dışıyken ya da yükleniyorken.
data-loading	loading verildiğinde. Yükleniyor durumunu devre dışından ayırmak için data-disabled ile birlikte okuyun.
data-component="button"	Her zaman. Uygulama stillerinin ve testlerin Button’ı bulduğu kanca.

Bağlantı olarak çizmek

Başka bir sayfaya götüren işlemler bağlantıdır. Bağlantının Button gibi görünmesi gerekiyorsa render ile <a> çizin; ekran okuyucu onu bağlantı olarak okur.

<Button render={<a href="/raporlar" />} nativeButton={false} variant="secondary">
  Raporlara git
</Button>