Drawer
A drawer is a panel that is typically overlaid on top of a page and slides in from off-canvas (tied to a side of the screen). It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context
Anatomy
Legend
- Container
- Button icon
- Scrim
Options
Positions
The scrim color can be changed by defining the color using one of our background colors from our tokens
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 in drawer by default both verically and horitzonally.
Usage guidelines
Popover to bottom drawer
A drawer can be used as an alternative to a popover on small screens. This is best when the content can be too overwhelming in a popover.
Content should be accessible
Do not combine colors of the drawer where text is not accessible to the user. Read more about WCAG accessbile 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.
Specs
Top or Bottom
When the drawer is positioned top or bottom, it will have a default height of 500px unless the user and width define it will be 100% of the screen.
Left or Right
When the drawer is positioned left or right, it will have a default width of 400px unless the user and height define it will be 100% of the screen.
Component Checklist
Visual information required to identify components and states (except inactive components) has a contrast ratio to meet WCAG 2.0 level AA. This exclude text contrast requirements. Unless disabled text should always be accessbile.
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Sizing, spacing, and other visual styles have been outline in documentation and the coded component has been VQA to match
Considerations have been made to think in darkmode, lightmode, button themes and other applicable themes
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.
A equivalent design component as been created matching as best as possible to properties found in the coded component.
Component can scale for all platforms mobile, tablet, and desktop.
Component has an opinion on how it scales on Homepage columns and other modular layouts.
Component can be used in iOS and Andriod or has an equivalent app component
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
Meets minimum requirements to ensure minimal impact to Web vitals. (Skeleton loads, Animations, Avoid layout shift, etc.)