IconButton

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

IconButton.tsx

Storybook

IconButton · Playground

IconButton, @bigbang/ui paketindedir. İkonlar @bigbang/icons kaydından ad ile seçilir.

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

<IconButton icon="x" label="Kapat" onClick={close} />;
<IconButton variant="secondary" tone="danger" icon="trash" label="Sil" />;

Özellikler

iconZorunlu

Açıklama

Kayıtlı ikon adı. İkon süstür; butonun adını label verir.

Tür

IconName

labelZorunlu

Açıklama

Erişilebilir ad: ekran okuyucu okur, ipucu metni olarak da kullanılır. Zorunludur; ikon tek başına ne yaptığını söylemez. Fiille yazın ("Kapat").

Tür

string

variant

Açıklama

İşlemin önemi. tertiary dolgu ve kenarlık taşımaz; araç çubukları ve tablo satırları içindir. glass fotoğraf ya da video üstündeki kontroller içindir; koyu bir data-backdrop içinde daha şeffaf camı kullanır.

Tür

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

Varsayılan

'tertiary'

tone

Açıklama

danger, silen ya da geri alınamayan işlemi işaretler.

Tür

'neutral' | 'danger'

Varsayılan

'neutral'

size

Açıklama

Button yükseklikleriyle aynı 24, 32, 36 ya da 40 px kare kutu. xs yoğun tablolardaki hücre içi işlemler içindir.

Tür

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

Varsayılan

'md'

shape

Açıklama

circle tam yuvarlaktır; yüzen ya da avatar benzeri işlemler içindir.

Tür

'square' | 'circle'

Varsayılan

'square'

loading

Açıklama

İşlem sürerken ikonun yerine dönen gösterge koyar ve tıklamaları yok sayar; buton odaklanabilir kalır.

Tür

boolean

Varsayılan

false

loadingLabel

Açıklama

loading başladığında bir kez duyurulan metin. Varsayılanı ui.button.loading ("Yükleniyor" ya da "Loading").

Tür

string

disabled

Açıklama

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

Tür

boolean

Varsayılan

false

focusableWhenDisabled

Açıklama

Devre dışıyken aria-disabled ile odaklanabilir tutar. Nedenini yakındaki metin açıklıyorsa kullanın.

Tür

boolean

Varsayılan

false

tooltip

Açıklama

Gören kullanıcılar da adı okuyabilsin diye label metnini üzerine gelince ve klavye odağında bir Tooltip içinde gösterir.

Tür

boolean

Varsayılan

true

tooltipSide

Açıklama

İpucunun butonun hangi yanında açılacağı.

Tür

'top' | 'bottom' | 'inline-start' | 'inline-end'

Varsayılan

'top'

className

Açıklama

Yalnızca yerleşim için: dış boşluk ve konum.

Tür

string

onClick, type, name, form gibi diğer Base UI Button öznitelikleri butona iletilir.

Veri öznitelikleri

• data-component="icon-button": kök <button> üzerinde.
• data-loading ve data-disabled: ilgili durumda, Button’dan gelir.