Drawer & slideout
Panel from right, left or bottom (mobile sheet); content is a slot.
In Figma
Section titled “In Figma”From guidelines/components/slideout-command-menu.md
Properties, variants and anatomy of the Figma components.
Drawer
Section titled “Drawer”Variants: 3
| Property | Type / options |
|---|---|
| Title | text |
| Content | slot (any content) |
| Position | Right · Left · Bottom |
Slideout menu
Section titled “Slideout menu”Side drawer (400px); content is a slot.
Variants: 1
| Property | Type / options |
|---|---|
| Content | slot (any content) |
| Title | text |
| Supporting text | text |
| Actions | boolean (on) |
Drawer
Section titled “Drawer”Do
- Use for detail views and secondary forms.
- Use the Bottom position on mobile.
- Put content into the Content slot.
Forbidden
- Never use a drawer for critical confirmations — use Modal.
- Never stack drawers.
- Never make a drawer wider than half the screen.