Bileşenler

Link

Bir sayfaya ya da adrese giden bağlantı; metnin içinde ya da kendi satırında durur.

Durumlar

Durum	Görsel değişiklik	Token’lar
Varsayılan	Bağlantı rengi ve her zaman soluk bir alt çizgi	`color-text-link`, `color-border-strong`
Üzerine gelme	Renk bir ton koyulaşır; alt çizgi metin rengini alır	`color-text-link-hovered`
Odak	2 px dış odak halkası, 2 px aralıkla, 4 px köşe	`color-focus-ring`, `border-width-focus`, `radius-xs`
Hedefsiz	Güvensiz `href` kaldırılınca bağlantı tıklanmaz	-

Link’in basılı ve devre dışı durumu yoktur.

Özellik	Değer	Token
Satır içi yazı stili	Çevresindeki metnin stili	-
Bağımsız `md` yazı stili	`label-md` (14 px)	`text.label-md`
Bağımsız `sm` yazı stili	`label-sm` (12 px)	`text.label-sm`
Alt çizgi aralığı	0,2 em	-
İkon boyutu	Satır içinde 12 px, bağımsızda 16 px	`icon-size-xs`, `icon-size-sm`
Metin ile ikon arası	2 px	`space-xxs`

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

Token	Açık mod	Koyu mod
`--bigbang-color-text-link`	`#125768#171717#171717`	`#77bacf#fafafa#fafafa`
`--bigbang-color-text-link-hovered`	`#0e414f#404040#404040`	`#a4d0df#d4d4d4#d4d4d4`
`--bigbang-color-focus-ring`	`#146d83#737373#737373`	`#77bacf#8c8c8c#8c8c8c`
`--bigbang-border-width-focus`	`2px2px2px`	`2px2px2px`
`--bigbang-radius-xs`	`4px4px4px`	`4px4px4px`
`--bigbang-icon-size-xs`	`12px12px12px`	`12px12px12px`
`--bigbang-icon-size-sm`	`16px16px16px`	`16px16px16px`
`--bigbang-space-xxs`	`2px2px2px`	`2px2px2px`

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
Üzerine gelme	`color` → `color-text-link-hovered` (`motion.hover`); alt çizgi metin rengini alır	`motion-hover-duration` (110 ms)	`motion-hover-easing`	Değişmez; konum değişmeyen bir renk geçişidir.
Odak	Odak halkası geçişsiz, anında belirir	Yok	Yok	Değişmez.
Giriş ve çıkış	Yok	Yok	Yok	Uygulanmaz.

Link hareket etmez ve ölçeklenmez; yalnızca renk geçişi kullanır. Değerler için Hareket sayfasına bakın.