Drawer
Drawer
Resources
Drawer is an expandable panel that displays content and controls over the application content. It provides temporary access to additional or related content without navigating away from the current screen.
By default, a drawer anchors to the left edge of the screen and has variant="primary".
You can place drawer on the left, right, top and bottom edges using the position prop.
Set variant="secondary" for a secondary drawer.
Consider using a right-anchored drawer to show supporting information related to the current context, such as recent events, notifications or quick settings. Always set your drawer's width suitable for the content inside it.
Anchor your drawer to the top edge if it will display supporting information that’s related to the current context and is best presented in a horizontal format, e.g., complex filters or a summary panel.
Anchor a drawer to the bottom edge of the screen when using a master-detail layout with content, such as graphs, images or comparisons that requires a wider horizontal format.
This example uses the disableDismiss prop to prevent the drawer closing on click away therefore ensuring the user takes an action within the drawer for it to close. This example closes when the user clicks the Submit button.
Use the disableScrim prop to prevent the scrim from rendering.
By default, a drawer anchors to the left edge of the screen and has variant="primary".
You can place drawer on the left, right, top and bottom edges using the position prop.
Set variant="secondary" for a secondary drawer.
Consider using a right-anchored drawer to show supporting information related to the current context, such as recent events, notifications or quick settings. Always set your drawer's width suitable for the content inside it.
Anchor your drawer to the top edge if it will display supporting information that’s related to the current context and is best presented in a horizontal format, e.g., complex filters or a summary panel.
Anchor a drawer to the bottom edge of the screen when using a master-detail layout with content, such as graphs, images or comparisons that requires a wider horizontal format.
This example uses the disableDismiss prop to prevent the drawer closing on click away therefore ensuring the user takes an action within the drawer for it to close. This example closes when the user clicks the Submit button.
Use the disableScrim prop to prevent the scrim from rendering.
By default, a drawer anchors to the left edge of the screen and has variant="primary".
You can place drawer on the left, right, top and bottom edges using the position prop.
Set variant="secondary" for a secondary drawer.
Consider using a right-anchored drawer to show supporting information related to the current context, such as recent events, notifications or quick settings. Always set your drawer's width suitable for the content inside it.
Anchor your drawer to the top edge if it will display supporting information that’s related to the current context and is best presented in a horizontal format, e.g., complex filters or a summary panel.
Anchor a drawer to the bottom edge of the screen when using a master-detail layout with content, such as graphs, images or comparisons that requires a wider horizontal format.
This example uses the disableDismiss prop to prevent the drawer closing on click away therefore ensuring the user takes an action within the drawer for it to close. This example closes when the user clicks the Submit button.
Use the disableScrim prop to prevent the scrim from rendering.