Bileşenler

ButtonGroup

İlişkili butonları aralıklı ya da birleşik olarak tek satırda ya da sütunda toplar.

Durumlar

ButtonGroup’un kendine ait etkileşim durumu yoktur; durumlar butonlardan gelir.

Durum	Görsel değişiklik	Token’lar
Varsayılan	Butonlar arasında 6 px boşluk	`space-sm`
Birleşik	Boşluk yok, iç köşeler düz, kenarlık 1 px biner	`border-width-default`
Odak (birleşik)	Odaklanan buton öne gelir; halkası tam görünür	`color-focus-ring`

Özellik	Değer	Token
Aralıklı grupta boşluk	6 px	`space-sm`
Birleşik grupta bindirme	1 px	`border-width-default`
İç içe gruplar arası	8 px	`space-md`
`ButtonGroup.Text`	Gömük dolgu, varsayılan kenarlık, yatayda 12 px iç boşluk, `label-md`	`color-surface-sunken`, `color-border-default`, `space-lg`
`ButtonGroup.Separator`	Grup kenarlarından 1 px içeride 1 px çizgi	`color-border-default`
Dış köşeler	Butonun yarıçapı (10 px)	`button-radius`
Genişlik	İçeriği kadar (`w-fit`)	-

Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.

Token	Açık mod	Koyu mod
`--bigbang-space-sm`	`6px6px6px`	`6px6px6px`
`--bigbang-space-md`	`8px8px8px`	`8px8px8px`
`--bigbang-border-width-default`	`1px1px1px`	`1px1px1px`
`--bigbang-button-radius`	`10px10px10px`	`10px10px10px`
`--bigbang-color-surface-sunken`	`#f5f5f5#f5f5f5#f5f5f5`	`#171717#171717#171717`
`--bigbang-color-border-default`	`#e5e5e5#e5e5e5#e5e5e5`	`#404040#404040#404040`
`--bigbang-color-focus-ring`	`#146d83#737373#737373`	`#77bacf#8c8c8c#8c8c8c`

Etkileşim	Hareket	Azaltılmış hareket
Üzerine gelme, basma, odak	ButtonGroup’un kendi hareketi yok; her buton `motion.press` ile basılır	Button’ın kuralı geçerlidir: ölçek 1 kalır
Giriş ve çıkış	Yok	Uygulanmaz

Butonların hareket değerleri için Button özellikler sekmesine bakın.