OVERLAYS / COMPONENTS
Drawer
Keep supporting work beside the page.
About drawer
Drawers are used to provide users with additional context or tasks realte
01
Anatomy
Shared parts, named consistently.
- 1ContainerRequired
The container of the Drawer
- 2HeaderRequired
The Header of the Drawer.
- 3Title
The title of the header.
- 4Icon ButtonRequired
Button to close the drawer.
- 5BodyRequired
The body of the Drawer.
Try the default
A working example with the shared V1 visual language.
When to use
Use for a focused supporting task with more space than a popover. Keep the surrounding context recognizable.
Focus is contained in the modal drawer. Escape closes; focus returns to the trigger.