A Drawer is an overlay containing secondary content that slides in from one side of the screen.
Forms in Drawers
Forms often appear in Drawers. See Forms in Overlays for guidance on the key decisions you'll need to make when building forms in overlays, including how to format your forms and choosing the overlay size that best fits your content.
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Container |
Container for the Drawer’s content. |
No |
|
2. Avatar |
Visual representation of a user or entity to support the title. |
Yes |
|
3. Title |
Concise summary of the Drawer’s content or purpose (e.g., Deployment Timeline or Add Account). |
No |
|
4. Subtitle |
Supporting text as a brief description of the Drawer’s content or purpose (e.g., BPE Process Test deployments to Development). |
Yes |
|
5. Actions |
1–2 Buttons that represent the actions the user can take (e.g., Cancel, Save). |
No |
|
6. Divider |
Separates the header from the main content. |
No |
|
7. Content area |
Main content of the Drawer. |
No |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| width Variant | narrow | medium | wide | narrow |
Component dependencies
This component is internally dependent on the following components:
Help and support