IconButton

Durumlar

Durum	Görsel değişiklik	Token’lar
Varsayılan	tertiary: dolgu ve kenarlık yok	Varyantın token’ları
Üzerine gelme	Arka plan bir ton koyulaşır	color-action-subtle-hovered (tertiary)
Basılı	Arka plan bir ton daha koyulaşır, kutu 0,97’ye küçülür	color-action-subtle-pressed, motion-press-scale
Odak	2 px dış odak halkası, 2 px aralıkla	color-focus-ring, border-width-focus
Devre dışı	Gri dolgu, soluk ikon, not-allowed imleci	color-action-disabled-default, color-action-on-disabled-default
Yükleniyor	İkon görünmez olur, ortada gösterge döner	Varyantın kendi token’ları

Diğer varyant ve ton renkleri Button ile aynıdır; Button özellikler sekmesine bakın.

Ölçüler

Boyut	Kutu	İkon	Token’lar
sm	32 × 32 px	16 px	button-height-sm, button-icon-size-sm
md	36 × 36 px	16 px	button-height-md, button-icon-size-md
lg	40 × 40 px	20 px	button-height-lg, button-icon-size-lg

Yatay iç boşluk 0’dır; ikon kutunun ortasındadır. Köşe yarıçapı button-radius (10 px), circle ile tam yuvarlaktır.

xs 24 × 24 px kare kutudur (button-height-xs) ve 12 px ikon taşır; yoğun tablo hücreleri içindir.

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-button-height-sm		32px32px32px	32px32px32px
--bigbang-button-height-md		36px36px36px	36px36px36px
--bigbang-button-height-lg		40px40px40px	40px40px40px
--bigbang-button-icon-size-sm		16px16px16px	16px16px16px
--bigbang-button-icon-size-md		16px16px16px	16px16px16px
--bigbang-button-icon-size-lg		20px20px20px	20px20px20px
--bigbang-button-radius		10px10px10px	10px10px10px
--bigbang-color-action-subtle-hovered		#f5f5f5#f5f5f5#f5f5f5	#303030#303030#303030
--bigbang-color-action-subtle-pressed		#ededed#ededed#ededed	#404040#404040#404040
--bigbang-color-focus-ring		#146d83#737373#737373	#77bacf#8c8c8c#8c8c8c

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).

IconButton, Button’ın tarifini kullanır ve kendi transition sınıfını yazmaz. Değerler için Hareket sayfasına bakın.