Bileşenler
Button
Bir eylemi başlatır. Solid ve ghost tipleri, yedi ton ve dört boyutu var; isteğe bağlı ikon, alt yazı, açılır ok ve yükleniyor durumu destekler.
Playground
Figma varyantı
🎛 Type=Button
💅 Style=Primary
👕 Size=Medium
🕹 State=Default
Disable=False
Icon Button=False
Loading=False
Show L Icon=False
Show R Icon=False
Subtitle=False
Dropdown=FalseAnatomi
- Kap. Dolgu, köşe yarıçapı ve gölge; tip, ton ve duruma göre değişir.
- Sol ikon. İsteğe bağlı. Large’da 20px, Medium ve Small’da 16px, Tiny’de 12px.
- Metin. Boyutun bold yazı stili.
- Alt yazı. İsteğe bağlı; metinden sonra, regular kalınlıkta ve daha açık on-renkte.
- Sağ ikon. İsteğe bağlı; sol ikonla aynı boyutta.
- Açılır ok. İsteğe bağlı; menü açan butonlar için.
Tipler
Solid butonlar (Figma Type=Button) ana eylemler içindir. Ghost butonların üzerine gelinene kadar dolgusu yoktur; yoğun yerleşimlerde ikincil eylemlere uyar. Ghost’ta Information tonu yoktur.
Boyutlar
| Size | Height | Padding (y / x) | Radius | Text | Icon |
|---|---|---|---|---|---|
| large | 48px | --layout-small / --layout-xlarge | --radius-form-element | ui/text lead/bold | 20px |
| medium | 40px | --layout-tiny / --layout-default | --radius-form-element | ui/text/bold | 16px |
| small | 32px | --layout-tiny / --layout-small | --radius-form-element-small | ui/text small/bold | 16px |
| tiny | 24px | --layout-micro / --layout-tiny | --radius-form-element-small | ui/text small/bold | 12px |
Durumlar
Her ton, durumlara göre kendi renk ailesinde değişir. Odak durumunda dolgu kalır ve dışa 3px çizgi eklenir; Primary ise açılır ve odak halkası gösterir.
| default | hover | pressed | focus | disabled | loading | |
|---|---|---|---|---|---|---|
| primary | ||||||
| secondary | ||||||
| tertiary | ||||||
| success | ||||||
| error | ||||||
| warning | ||||||
| info | ||||||
| ghost primary | ||||||
| ghost secondary | ||||||
| ghost tertiary | ||||||
| ghost success | ||||||
| ghost error | ||||||
| ghost warning |
Sadece ikon
Tek ikonlu yuvarlak butonlar: Large 48px, Medium 40px, Small 32px, Tiny 24px.
Tokenlar
Button’ın her ton için kullandığı tokenlar (X = primary, secondary, tertiary, success, error, warning, info).
| State | Fill | Text | Shadow |
|---|---|---|---|
| Default | --color-X | --color-on-X | Primary, Tertiary: --shadow-button-default · Secondary: --shadow-button-secondary-default |
| Hover | --color-X-natural | --color-on-X | — |
| Pressed | --color-X-shade | --color-on-X | — |
| Focus | --color-X (Primary: --color-X-tint) | --color-on-X | Primary: --shadow-focus-primary · others: 3px line |
| Disabled | --color-X-soft | --color-X-tint | — |
| Loading | --color-X-soft | — | Loader: --color-X / --color-on-X |
Figma notları
- Yükleniyor göstergesinin boyutu Figma’da varyantlara göre farklı (Medium’da 20, 24 ya da 16px). Kodda Large ve Medium 24px, Small ve Tiny 16px.
- Tiny’de Figma’da sol ikon 12px, sağ ikon 16px. Kodda ikisi de 12px.
- Figma’da Success Small ve Tiny yükleniyor varyantları Tertiary soft dolgusunu kullanıyor. Kodda Success soft.
- Figma’da Ghost Tertiary metni tertiary/tertiary (beyaz) renginde; açık zeminde kayboluyor. Kodda foreground/high-emphasis.
Figma’dan koda
| Figma | React |
|---|---|
| 🎛 Type = Button / Ghost | variant='solid' / 'ghost' |
| 💅 Style = Primary … Information | tone='primary' … 'info' |
| 👕 Size = Large / Medium / Small / Tiny | size='large' / 'medium' / 'small' / 'tiny' |
| 🕹 State = Hover / Pressed / Focus | :hover / :active / :focus-visible |
| Disable = True | disabled |
| Loading = True | loading |
| Icon Button = True | icon={…} aria-label="…" |
| Show L Icon / Show R Icon | iconLeft={…} / iconRight={…} |
| Subtitle = True | subtitle="…" |
| Dropdown = True | dropdown |