Drawer
Drawer is a temporary, focused region that supports a small, self-contained action, such as choosing an option, confirming a decision, or entering a few fields, without leaving the current screen. It's designed to briefly pause the primary flow, allow the completion of tasks and then return directly to the prior context.
| Salt package | @salt-ds/core |
|---|---|
| Available since | 1.19.0 |
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 and variant="tertiary" for a tertiary 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.