Bileşenler

Toast

Bir işlemden sonra kısa süre görünen ve kendiliğinden kapanan kısa bir mesaj; örneğin “Değişiklikler kaydedildi”.

TasarımcıGeliştirici

Playground

Değişiklikler kaydedildiProfiliniz güncel.

StilCihaz Açıklama CTA butonları

Figma varyantı

Style=Success
Device=Desktop
Description=True
CTA Buttons=False
Close Button=True

Stiller ve cihazlar

İkonu renklendiren beş stil ve herhangi bir ikon ya da emoji için Style=Icon. Desktop toast’lar yükseltilmiş beyaz kartlardır; Mobile toast’lar koyudur ve metnine sarılır.

DefaultDescription

InfoDescription

SuccessDescription

ErrorDescription

WarningDescription

Style=Icon

Mobile

Tokenlar

Part	Token
Card	`--color-surface-level-1, --radius-card, --shadow-form-level-1`
Mobile card	`--color-surface-background-invert, --color-foreground-level-2 title`
Padding	`--layout-tiny --layout-small --layout-tiny --layout-default`
Icon	`--color-primary / --color-info / --color-success / --color-error / --color-warning`
Title / description	`--text-ui-text-bold / --text-ui-text-small-regular`

Figma notları

Her stil, tonla renklenen info ikonunu kullanıyor; kod da öyle, başka bir ikonu icon ile alır.
Style=Icon, 8px köşeli 24px bir emoji (Emoji / Cookie) kullanıyor; onu icon olarak verin.
Mobile açıklama ters zeminde foreground/medium-emphasis’i, Default Mobile ikon da primary’yi koruyor; açık temada koyu üstüne koyu kalıyor. Kod ikisini de korur.
Figma’da toast’lar için yığma, süre ya da hareket yok; kod onları alt ortada yığar, 5 saniye sonra kapatır ve motion-swipe-y ile kaydırarak getirir.

Figma’dan koda

Figma	React
Style = Default / Information / Success / Error / Warning	`tone='default' / 'info' / 'success' / 'error' / 'warning'`
Style = Icon + Change Icon	`icon={…}`
Device = Desktop / Mobile	`device='desktop' / 'mobile'`
Description / CTA Buttons / Close Button	`description / actions / onClose`