Components
Drawer
A panel that slides in from the side and fills the height of the window: filters, the details of a row, a settings form.
Playground
Figma variant
👉 Position=Right
Footer=True
.Modal Header › Description=TrueSides
Right is the default; Left suits navigation. The width is the small modal size and the full width on mobile. It shares the Modal header and footer.
Tokens
| Part | Token |
|---|---|
| Width | --modal-small-size |
| Surface | --color-surface-level-1 |
| Overlay | --color-component-modal-overlay |
| Shadow | --shadow-depth-xl |
| Motion | --motion-swipe-y |
Figma to code
| Figma | React |
|---|---|
| 👉 Position = Right / Left | side='right' / 'left' |
| Footer (.Modal Footer) | footer={…} |
| .Modal Header › Title / Description | title / description |