Bileşenler

Alert

Sayfanın içinde, durumu hakkında bir mesaj: bir işlemden önce uyarı, bir kaydın sonucu, aşılan bir sınır.

TasarımcıGeliştirici

Playground

Deneme süreniz 3 gün içinde bitiyorProjelerinizi korumak için bir ödeme yöntemi ekleyin.

StilYön Açıklama CTA butonları Kapatma butonu

Figma varyantı

Style=Information
✈️ Direction=Vertical
Description=True
CTA Buttons=True
Close Button=True

Tonun soft rengi üzerinde beş stil. Vertical açıklamayı ve butonları başlığın altına dizer; Horizontal her şeyi tek satırda taşıyan bir haptır.

DefaultDescription

InfoDescription

SuccessDescription

ErrorDescription

WarningDescription

DefaultDescription

InfoDescription

SuccessDescription

ErrorDescription

WarningDescription

Style	Background	Icon
default	`--color-surface-level-3`	`--color-primary`
info	`--color-info-soft`	`--color-info`
success	`--color-success-soft`	`--color-success`
error	`--color-error-soft`	`--color-error`
warning	`--color-warning-soft`	`--color-warning`
radius	`--radius-form-element (Horizontal: --radius-full)`	`—`
padding	`--layout-tiny --layout-small --layout-tiny --layout-default`	`—`

Her stil info ikonunu kullanıyor; kod da öyle, başka bir ikonu icon ile alır.
Information ikonu info/on-info; açık info-soft zeminde soluk kalıyor. Kod, Toast’taki gibi info/info kullanır.
Başlık ve açıklama metinlerinin rengi yok; kod Toast’taki gibi high ve medium emphasis kullanır.
Vertical CTA butonları tonun solid küçük Button’ı ve bir tertiary buton; Horizontal ghost primary küçük Button kullanır.

Figma	React
Style = Default / Information / Success / Error / Warning	`tone='default' / 'info' / 'success' / 'error' / 'warning'`
✈️ Direction = Vertical / Horizontal	`direction='vertical' / 'horizontal'`
Description	`description="…"`
CTA Buttons (Button 01–03)	`actions={<Button size="small" />…}`
Close Button	`onClose={…}`