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.

Also known as: Flyout, Sheet
Salt package@salt-ds/core
Available since1.19.0
CodeOpens in a new tab

Keyboard interactions

KeyFunction
Enter / Space
  • If focus is on the trigger element, this action activates the element and opens the drawer. Focus doesn't leave the drawer.
  • If focus is on close button, this action closes the drawer. Focus returns to the trigger element.
  • If focus is on a content element configured to close the drawer when activated, such as a Submit button, this action closes the drawer.
Tab
  • Tab moves focus through focusable content elements in the drawer. Focus doesn't leave the drawer.
Shift + Tab
  • This action moves focus to previous focusable content element in the drawer. Focus doesn't leave the drawer.
Escape
  • Escape closes the drawer and returns focus to the trigger element.