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.
Drawer comes in three variants: primary, secondary and tertiary. The primary variant is the default. Set variant="secondary" for a secondary drawer and variant="tertiary" for a tertiary drawer.
Use the position prop to anchor the drawer to the left, right, top or bottom edge of the screen. The default position is left.
- Consider using a right-anchored drawer to show supporting information related to the current context, such as recent events, notifications or quick settings.
- 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.
DrawerHeader follows our standardized header for container components, and it can be added to provide a structured header for drawer. The header includes a title and actions that follow our Header Block pattern.
Use the header prop to set the title of your drawer. You can use the optional preheader prop to render a preheader above the main header, and the optional description prop to render a description below it.
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.
Use the resizable prop to allow the user to resize the drawer. Users can drag its inner edge, click the edge and then click the new position for it, or focus the edge and use the arrow keys.
Use the --saltDrawer-minResize and --saltDrawer-maxResize CSS variables to set size limits. They apply to the width of left and right drawers and the height of top and bottom drawers.
The drawer starts at the width or height set in its styles and keeps the size the user sets, including when it closes and opens again.
The accent bar is hidden by default in resizable right drawers.
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 rendered by default, except in resizable right drawers. Use the disableAccent prop on DrawerHeader to hide or show 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.