Bileşenler

Tab

Aynı sayfanın görünümleri arasında geçiş yapar. Primary sekmelerin altı çizilidir, Secondary sekmeler haptır, Button sekmeler küçük ghost butonlardır.

TasarımcıGeliştirici

Figma’da aç

Playground

İçerik: Genel bakış

TipHizalamaSekme Alt çizgi Badge Info Sonuncuyu pasif yap

Figma varyantı

Tab
Align=Left
Border Bottom=True

Tab Item
Type=Primary
Badge=False
Info=False

Tipler

Üç tip de 40px yüksekliğindedir. Aktif Primary sekmenin altı primary çizilir; aktif Secondary sekme primary soft’tur; aktif Button sekme basılıdır (surface/level-3). Hover, primary metinli surface/level-2’dir.

Tokenlar

Type	Item padding	Active	Hover
primary	`--space-tiny --space-medium`	`--color-primary underline and text`	`--color-surface-level-2 inner box, --color-primary text`
secondary	`--space-micro + --space-micro --space-small`	`--color-primary-soft, --color-primary text`	`--color-surface-level-2, --color-primary text`
button	`--space-micro --space-medium + Button Small`	`--color-surface-level-3`	`--color-surface-level-2`
border	`—`	`--border-width --color-surface-level-3`	`—`

Figma notları

Primary hover, öğenin 4px içine 12px köşeli surface/level-2 bir kutu çiziyor; varsayılan ve aktif öğelerde kutu yok. Kod bunu bir iç parçayla korur.
Secondary öğeler aktif değilken de surface/level-1 hap; beyaz sayfada kayboluyorlar.
Button öğeler butonun iki yanında 16px boşluk bırakıyor; Button sekmeler arasında 32px oluyor.
Kullanımdan kalkmış Tab ve Tab Item setleri yapılmadı.
Figma’da focus durumu yok; kod primary focus halkası ekler.

Figma’dan koda

Figma	React
Tab Item Type = Primary / Secondary / Button	`variant='primary' / 'secondary' / 'button'`
Tab Align = Left / Center / Right	`align='start' / 'center' / 'end'`
Tab Border Bottom	`border`
Tab 02 … Tab 07	`items.length`
Tab Item Badge / Info / Disabled	`{ badge } / { info: true } / { disabled: true }`
Tab Item Active / State=Hover	`value / :hover`