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 |
Drawers cover the entire height of the viewport and are always modal. This means that the content behind them is inert and can't be interacted with. A Scrim is used to visually obscure the content behind the drawer.
Always set a logical width suitable for the content inside the drawer. Refer to Salt's Forms pattern for information on logical forms width, and the typography foundation for guidance on paragraph text width.
- To complete quick, self-contained actions with minimal disruption, such as quick selections, lightweight submissions, or confirmations, then return to the prior context.
- To present on-demand, contextual supporting content or controls (e.g., short forms, secondary actions, or relevant information) that can be dismissed when no longer needed.
- For ongoing parallel work that benefits from persistent visibility.
- If supporting information and controls should remain available while the main task continues (e.g., referencing details, inspecting data, filtering results, editing attributes), use
SidePanelinstead.
To import Drawer and related components from the core Salt package, use: