Anatomy
Note: Image is not to scale
- Container
- Button icon
- Scrim
Options
Position
The drawer can be attached to any side of the screen.
Optional Close
The drawer close button icon can be optional.
Optional Scrim
The scrim is optional when using the drawer. Should note that without a scrim, it is recommended to have a close button to ensure users can close the drawer if that is desired.
Optional Scrim color
The scrim color can be changed by defining the color using one of our background colors from our tokens
Drawer color
The drawer color can be changed by defining the color using one of our background colors from our tokens.
Height and Width
Drawer width and height can be defined. Height can be defined if the position is top or bottom and width can be defined if the position is right or left.
Behavior
Closing
When the close button icon is rendered, the drawer can be closed by either clicking the scrim or the close button. Note: The drawer can be set to open and will remain open even if the scrim is clicked on.
Content overflow
Content will overflow, both vertically and horizontally, in the drawer by default.
Guidance
Content should be accessible
Do not combine colors of the drawer where text is not accessible to the user. Read more about WCAG accessible contrast requirements.
Avoid full screen
A drawer should never take the fullscreen of the viewer window. The drawer should always leave at least 1/3 of the screen available.