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 |
Drawer displays with a header, content area, and footer. The component is modal, meaning it prevents interaction with the rest of the UI while open and must be addressed by clicking one of the action buttons or dismissing with the close button in DrawerHeader. If the content of the drawer extends beyond the end of the screen, the DrawerContent area will become scrollable.
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.
DrawerHeader follows our standardized header for container components and app regions, and it can be added to provide a structured header for drawer. The header includes a title and actions that follows our Header Block pattern.
DrawerFooter stays pinned to the bottom of the drawer and can be added to display the actions that complete or dismiss the task, such as Save and Cancel. Follow our Button Bar pattern when choosing button appearances.
You can use the optional preheader prop to render a preheader above the main header of your 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.
The accent bar is always rendered unless you pass the disableAccent prop to DrawerHeader, which hides it.
Use the disableScrim prop to prevent the scrim from rendering.
DrawerCloseButton can be added as a child of the Drawer component to render a close button in the top right corner of the drawer. You can pass the onClick prop like with any Button component to handle the close button click.
Note: DrawerCloseButton is deprecated. Use the prop actions within DrawerHeader instead.