Bileşenler

Cell

Bir listenin satırı: Selectbox seçenekleri ve Dropdown öğeleri. Metni, isteğe bağlı ikon, avatar, badge ve checkbox ya da radio ile taşır.

TasarımcıGeliştirici

Figma’da aç

Playground

İstanbul

Figma varyantı

🎛 Type=Default
👕 Size=Medium
🕹 State=Default
Selected=False
Icon (L)=False
Icon (R)=False
Avatar=False
Badge (L)=False
Badge (R)=False
Bodycopy=False
Inline Badge=False
Subtitle=False

Tipler

Default bir metin satırıdır; seçili Default satırı bir tik gösterir. Multi Text bodycopy, satır içi badge ve alt başlık ekler. Checkbox ve Radio kontrolü metnin önüne çizer. Destructive kırmızıdır. Action küçük ghost butonlar, Search bir arama alanı taşır.

Default

Default selected

Multi TextBodycopyNewSubtitle

Avatar and badgeAdmin

Checkbox

Radio

Destructive

Durumlar

Hover surface/level-2’dir. Seçili hâl primary soft zemin ve primary metindir, hover’da surface/level-3. Destructive error soft, tint ve natural kullanır.

Hover

Selected

Selected hover

Destructive hover

Destructive selected

Boyutlar

Medium

Small

Size	Height	Padding	Radius	Text	Icon	Avatar / Badge
medium	40px	`--space-tiny --space-medium`	`--radius-form-element`	ui/text/regular	20px	Tiny
small	32px	`--space-micro --space-small`	`--radius-form-element-small`	ui/text small/regular	16px	Micro

Cell Helper

Hücreleri gruplayan başlık ve ayırıcılar: Caption, Caption + Divider, Divider ve Caption No Padding.

Caption

Cell

Caption + Divider

Cell

Tokenlar

State	Background	Text
default	`transparent`	`--color-foreground-high-emphasis`
hover	`--color-surface-level-2`	`--color-foreground-high-emphasis`
selected	`--color-primary-soft`	`--color-primary`
selected hover	`--color-surface-level-3`	`--color-primary`
destructive	`transparent / --color-error-soft (hover)`	`--color-error`
destructive selected	`--color-error-tint / --color-error-natural (hover)`	`--color-error`

Figma notları

Small Default Hover’da boşluk 10px, diğer hücrelerde 12px; kod 12px kullanır.
Small Checkbox ve Radio metni layout-micro ile, diğer Small hücreler s-micro ile boşluklar; ikisi de 4px.
Figma’da disabled hücre yok; kod aria-disabled seçenekleri griye çevirir.
Checkbox ve radio’yu hücre çizer (seçenek hücrenin kendisidir); Checkbox ve Radio bileşenleri gibi görünür.
Görselli hücreler (.Cell Image, 2145:13023) avatarlı bir Default hücredir; ayrı bileşen yok.

Figma’dan koda

Figma	React
🎛 Type = Default / Multi Text	`<Cell> (+ bodycopy, inlineBadge, subtitle)`
🎛 Type = Checkbox / Radio	`control='checkbox' / 'radio'`
🎛 Type = Destructive	`tone='destructive'`
🎛 Type = Action	`<CellActions>`
🎛 Type = Search	`<CellSearch><Input type="search" size="small" /></CellSearch>`
👕 Size = Medium / Small	`size='medium' / 'small'`
Selected = True	`selected`
Cell Helper / Type	`<CellHelper variant='caption' \| 'caption-divider' \| 'divider' \| 'caption-flush'>`