Component · overlay.drawer
Drawer
A panel that slides in from an edge to present supplementary UI.
Informative mappings only. Platform examples below describe possible target primitives. This release does not ship adapters for React, Swift, Android or any other platform.
Anatomy
| Part | Required | Description |
|---|---|---|
backdrop | no | Optional blocking layer for modal drawers. |
surface | yes | Sliding panel surface. |
title | no | Drawer title. |
content | yes | Primary drawer content. |
close | no | Explicit dismiss control. |
States
- default
- open
- opening
- closing
- closed
Keyboard
- Escape dismisses when enabled
- Tab moves through interactive content while open
- Focus restores to the trigger on close for modal drawers
Accessibility
Declare modality. Modal drawers need focus containment and restoration; non-modal drawers must not steal focus unexpectedly. Provide an accessible name and a clear dismiss mechanism.
Motion
Edge slide is expected; under reduced motion, fade or instant open/close without long travel.
Platform mappings
web
web
Dialog-like pattern or complementary region depending on modality.
apple
apple
SwiftUI sheet or drawer-style presentation.
android
android
Compose ModalBottomSheet or ModalNavigationDrawer as appropriate to edge and modality.