Anatomy
|
Item |
Name |
Description |
Optional? |
|---|---|---|---|
|
1 |
Overlay |
Background overlay between the main content and Drawer container. |
- |
|
2 |
Close Handler |
Defines how the Drawer can be dismissed, such as a drag bar, close button, or back button. |
- |
|
3 |
Drawer |
Container that holds the content. |
- |
|
4 |
Content Slot |
The main content of the drawer where information is displayed. It accommodates any composition as needed. |
- |
|
5 |
Footer |
A slot typically reserved for actions, such as buttons to confirm or cancel an action. |
Yes |
Specification and properties
Spacing
The Drawer should follow our default spacing for mobile screens. If there is content overflow and scrolling is required, the bottom padding can be removed.
|
Property |
Value |
Token |
|---|---|---|
|
Bottom Padding |
24px |
spacing.300 |
|
Side Padding |
16px |
spacing.200 |
Height
There are two options for the Drawer height: flexible and full height. In code, the height can be set using percentages. In Figma, you can achieve a similar result by setting the Drawer height to "Hug."
- Flexible: The height adapts depending on the Drawer content. It can be set by percentage in code.
- Full-height: The Drawer fills the screen with a 24px top margin.
Footer
The footer is an optional element, primarily reserved for actions related to the Drawer, such as confirming or canceling an action. By default, the footer contains two slots, which can be populated with any content.
To help create these actions, we offer usage suggestions based on our button hierarchy and order.
Overflow
The footer should remain sticky at the bottom of the screen. If content overflows and scrolling is required, enable the scrollable property directly on the Footer layer in Figma. This will add a divider above the footer to clearly separate it from the Drawer content.
Motion
Action: Drawer Slide In
|
Layer |
Trigger |
Attribute |
Duration |
Easing |
Delay |
Effect |
|---|---|---|---|---|---|---|
|
Drawer |
Click |
CenterY |
Duration40 |
EasyOut |
|
Slide In |
|
Opacity Background |
Auto |
Opacity |
Duration20 |
EasyOut |
|
Fade In |
Action: Drawer Slide Out
|
Layer |
Trigger |
Attribute |
Duration |
Easing |
Delay |
Effect |
|---|---|---|---|---|---|---|
|
Drawer |
Click |
CenterY |
Duration30 |
EasyIn |
|
Slide Out |
|
Opacity Background |
Auto |
Opacity |
Duration10 |
EasyIn |
|
Fade Out |