Components
Modal
A dialog in the middle of the page, over a dimmed overlay: a confirmation, a short form, a message that needs an answer.
Playground
Figma variant
👕 Size=Medium
Footer=True
.Modal Header › Description=TrueSizes
Small, Medium and Large follow the modal size tokens: 433, 657 and 1105px on desktop, the full width minus a margin on mobile. The header has the title, an optional description and the close button; the footer holds the actions, the main one last.
Tokens
| 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 to code
| 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 |