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
Durumlar
Bölüm başlığı “Durumlar”Button’ın durumları ve her birinde değişen görünüm. Renkler token’lardan gelir; marka ve mod değişince kendiliğinden değişir.
| Durum | Destekleniyor | Görsel değişiklik | Token’lar |
|---|---|---|---|
| Varsayılan | Evet | Seçilen varyant ve tonun arka planı, etiket rengi ve kenarlığı. | color-action-primary-default, color-action-secondary-default, color-action-danger-default |
| Üzerine gelme (hover) | Evet | Arka plan bir ton koyulaşır; üçüncül varyantta dolgu belirir. | Aşağıdaki tabloya bakın |
| Basılı tutma (pressed, active) | Evet | Arka plan bir ton daha koyulaşır. | Aşağıdaki tabloya bakın |
| Klavye odağı | Evet | Button’dan 2 px dışarıda, 2 px kalınlığında odak halkası; yalnızca :focus-visible ile çizilir. |
color-focus-ring, border-width-focus |
| Devre dışı | Evet | Gri dolgu, soluk etiket, saydam kenarlık, not-allowed imleci. Hover ve pressed renkleri uygulanmaz. |
color-action-disabled-default, color-action-on-disabled-default |
Devre dışı ama odaklanabilir (focusableWhenDisabled) |
Evet | Devre dışı ile aynı görünüm; odak halkası yine çizilir. | color-action-disabled-default, color-action-on-disabled-default, color-focus-ring |
Yükleniyor (loading) |
Evet | Varyantın renkleri korunur; etiket görünmez olur ama yer tutar, ortada gösterge döner. İmleç progress olur, hover ve pressed renkleri uygulanmaz. disabled ile birlikte de yükleniyor kazanır: devre dışı dolgusu çizilmez ve Button odakta kalır. |
Varyantın kendi token’ları |
| Seçili, açık/kapalı (toggle) | Hayır | Bu sürümde yok. | Yok |
Hover ve pressed arka planları
Bölüm başlığı “Hover ve pressed arka planları”| Varyant | Ton | Üzerine gelme | Basılı |
|---|---|---|---|
primary |
neutral |
color-action-primary-hovered |
color-action-primary-pressed |
secondary |
neutral |
color-action-secondary-hovered |
color-action-secondary-pressed |
tertiary |
neutral |
color-action-subtle-hovered |
color-action-subtle-pressed |
primary |
danger |
color-action-danger-hovered |
color-action-danger-pressed |
secondary |
danger |
color-action-danger-subtle-hovered |
color-action-danger-subtle-pressed |
tertiary |
danger |
color-action-danger-subtle-hovered |
color-action-danger-subtle-pressed |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Yükseklik, küçük / orta / büyük | 32 / 36 / 40 px; dokunmatik (kaba işaretçi) ekranda orta 44 px, büyük 48 px | button-height-sm, button-height-md, button-height-lg |
| Yatay iç boşluk, küçük / orta / büyük | 12 / 16 / 24 px | button-padding-inline-sm, button-padding-inline-md, button-padding-inline-lg |
| Baş ya da son ikon tarafındaki iç boşluk | 2 px az: 10 / 14 / 22 px | button-icon-inset |
| Dolgu | 1 px kenarlığın içinde biter (background-clip: padding-box) |
border-width-default |
| Köşe yarıçapı | 10 px | button-radius (radius.lg) |
| İkon boyutu, küçük / orta / büyük | 16 / 16 / 20 px | button-icon-size-sm, button-icon-size-md, button-icon-size-lg |
| İkon ile etiket arası | 6 px | space.sm |
| Odak halkası | 2 px kalınlık, 2 px dışarıda | border-width-focus |
| Etiket yazı stili | label-md (14/20, orta kalınlık) |
text.label-md |
Hedef boyutu: en küçük boy 32 px yüksekliktedir ve WCAG 2.5.8’in 24 px’lik asgari hedefini karşılar.
xs boyutu 24 px yüksektir, 8 px yatay iç boşluk, 12 px ikon ve label-sm metin kullanır (button-height-xs, button-padding-inline-xs, button-icon-size-xs). 24 × 24 px, WCAG 2.2 hedef boyutunun alt sınırıdır; yalnızca yoğun tablo hücrelerinde kullanın.
Token’lar
Bölüm başlığı “Token’lar”Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-action-primary-default | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-action-primary-hovered | #125768#262626#262626 | #a4d0df#d4d4d4#d4d4d4 | |
--bigbang-color-action-primary-pressed | #0e414f#404040#404040 | #cfe6ee#a1a1a1#a1a1a1 | |
--bigbang-color-action-on-primary-default | #ffffff#fafafa#fafafa | #0a0a0a#171717#171717 | |
--bigbang-color-action-secondary-default | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-action-secondary-hovered | #fafafa#fafafa#fafafa | #303030#303030#303030 | |
--bigbang-color-action-secondary-pressed | #f5f5f5#f5f5f5#f5f5f5 | #404040#404040#404040 | |
--bigbang-color-action-on-secondary-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-action-subtle-hovered | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-action-subtle-pressed | #ededed#ededed#ededed | #404040#404040#404040 | |
--bigbang-color-action-danger-default | #a6383c#a6383c#a6383c | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-action-danger-hovered | #822b2e#822b2e#822b2e | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-action-danger-pressed | #4c1d1d#4c1d1d#4c1d1d | #ffd6d4#ffd6d4#ffd6d4 | |
--bigbang-color-action-on-danger-default | #ffffff#ffffff#ffffff | #0a0a0a#0a0a0a#0a0a0a | |
--bigbang-color-action-danger-subtle-hovered | #fff4f3#fff4f3#fff4f3 | #331212#331212#331212 | |
--bigbang-color-action-danger-subtle-pressed | #ffe8e7#ffe8e7#ffe8e7 | #4c1d1d#4c1d1d#4c1d1d | |
--bigbang-color-action-on-danger-subtle-default | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-action-disabled-default | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-action-on-disabled-default | #a1a1a1#a1a1a1#a1a1a1 | #525252#525252#525252 | |
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-border-default | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 | |
--bigbang-color-border-danger | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--bigbang-button-height-sm | 32px32px32px | 32px32px32px | |
--bigbang-button-height-md | 36px36px36px | 36px36px36px | |
--bigbang-button-height-lg | 40px40px40px | 40px40px40px | |
--bigbang-button-padding-inline-sm | 12px12px12px | 12px12px12px | |
--bigbang-button-padding-inline-md | 12px12px12px | 12px12px12px | |
--bigbang-button-padding-inline-lg | 16px16px16px | 16px16px16px | |
--bigbang-button-icon-inset | 2px2px2px | 2px2px2px | |
--bigbang-button-radius | 10px10px10px | 10px10px10px | |
--bigbang-button-icon-size-sm | 16px16px16px | 16px16px16px | |
--bigbang-button-icon-size-md | 16px16px16px | 16px16px16px | |
--bigbang-button-icon-size-lg | 20px20px20px | 20px20px20px |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Özellik | Süre token’ı | Easing token’ı | Hareketi azaltma |
|---|---|---|---|---|
| Basma | scale 1 → 0,97 (motion.press) |
Basınca motion-press-duration (70 ms), bırakınca motion-release-duration (230 ms) |
motion-press-easing; bırakırken easing-spring-productive-fast |
Ölçek 1 kalır; yalnızca renk değişir. |
| Üzerine gelme ve basılı renk | background-color, border-color, color |
motion-hover-duration (110 ms) |
motion-hover-easing |
Değişmez; yalnızca renk geçişidir. |
| Odak | Odak halkası geçişsiz, anında belirir | Yok | Yok | Değişmez. |
| Yükleniyor | Göstergenin dönmesi (animate-spin) |
period-spinner (1 sn), doğrusal, sonsuz |
Doğrusal | Gösterge dönmez ama görünür kalır (reduce-motion:animate-none). |
| Başarı | Onay işareti opacity ve scale 0,6 → 1 (motion.success), bir kez |
motion-feedback-duration (240 ms), motion-feedback-hold (2000 ms) kadar kalır |
motion-feedback-easing |
Ölçek 1 kalır, işaret 110 ms’de belirir ve durur. |
| Giriş ve çıkış | Yok; Button sayfayla birlikte gelir | Yok | Yok | Uygulanmaz. |
Değerlerin tamamı Hareket temel sayfasındaki token’lardan gelir; Button kendi transition sınıfını yazmaz.