Bileşenler

Modal

Kararmış bir overlay üzerinde, sayfanın ortasında bir diyalog: bir onay, kısa bir form, cevap bekleyen bir mesaj.

TasarımcıGeliştirici

Playground

Boyut Açıklama Alt bölüm Esc ve overlay ile kapansın

Figma varyantı

👕 Size=Medium
Footer=True
.Modal Header › Description=True

Boyutlar

Small, Medium ve Large modal boyut tokenlarını izler: masaüstünde 433, 657 ve 1105px, mobilde kenar boşluğu bırakan tam genişlik. Başlıkta başlık, isteğe bağlı açıklama ve kapatma butonu; alt bölümde eylemler, ana eylem en sonda.

Tokenlar

Part	Token
Width	`--modal-small-size / --modal-medium-size / --modal-large-size`
Surface	`--color-surface-level-1`
Overlay	`--color-component-modal-overlay`
Shadow	`--shadow-depth-xl`
Radius	`--radius-card`
Padding	`--space-modal (body top: --space-modal-horizontal)`
Title / description	`--text-ui-page-title / --text-ui-text-regular`

Figma’dan koda

Figma	React
👕 Size = Small / Medium / Large	`size='small' / 'medium' / 'large'`
.Modal Header › Title	`title="…"`
.Modal Header › Description	`description="…"`
Footer (.Modal Footer)	`footer={<>…</>}`
Body › Content	`children`