pattern-library checked
Fluent 2 Drawer
Defines drawers as secondary content surfaces sliding in from an edge for supplemental information and simple actions related to main content, with guidance to use popovers for shorter contextual information and dialogs for confirmations.
Pattern Decisions This Source Supports
| Pattern | Supported decision | Required contract | Claim note |
|---|---|---|---|
| Drawer | Choose drawer when users need page-adjacent detail, preview, metadata, comments, simple actions, or object inspection without leaving the current page. | The opener names or is adjacent to the object whose detail will appear in the drawer. | Fluent defines drawers as secondary content surfaces that slide in from an edge for supplemental information and simple actions related to main content. |
| Drawer with no close or return path | Flag this anti-pattern when a temporary drawer has no visible close control, no Escape path, no back-route dismissal, no equivalent for gesture-only close, or no predictable focus return. | Opening the drawer records the opener or selected object as the return target. | Defines drawers as edge surfaces for secondary content related to main content. |
| Modal for nonblocking content | Flag this anti-pattern when content can be read later, ignored safely, dismissed without consequence, or shown near its object without blocking the rest of the page. | Users can continue the primary task while reading or ignoring nonblocking information. | Supports drawers for secondary content and simple actions, with dialogs reserved for confirmations. |
Evidence Role
This source is treated as pattern-library evidence. Use it to validate the decision rules above, not as a visual style reference.
Publisher: Microsoft Fluent 2 Design System. Last checked: .