Status
Drawer
A panel that slides in from the right over a dimmed page (on phones, a sheet that slides up from the bottom), so someone can work on one thing (a project from the Home calendar) without leaving where they are.
Preview
Props
| Prop | Type | Description |
|---|---|---|
openRequired | boolean | |
onCloseRequired | () => void | |
titleRequired | React.ReactNode | |
eyebrow | React.ReactNode | |
actions | React.ReactNode | Buttons beside the close button, such as a link to the full page. |
footer | React.ReactNode | |
side | 'right' | Width in px (default 560); on phones a full sheet from the bottom. right keeps it a panel from the right on phones too (full height, rounded on its left side), for navigation like the phone menu. |
placement | 'side' | 'center' | center: a large panel in the middle of the screen (a centered peek), instead of from the right. Phones keep the sheet. |
width | number | |
closeLabel | string | |
className | string | |
children | React.ReactNode |
Guidelines
A panel that slides in from the right over a dimmed page (on phones, a sheet that slides up from the bottom), so someone can work on one thing (a project from the Home calendar) without leaving where they are.
Provide: open, onClose, title, optional eyebrow (the brand), actions (a link to the full page), footer, width (default 560; on phones it is a full sheet), and the content as children: the same panels the full page uses.
- Put everything needed in it, so leaving the page is a choice, not a requirement. Offer the full page as an action.
- Escape, the close button and the dimmed page close it. Focus moves into it when it opens (to the close button, or to a field in the content marked
data-drawer-focus, such as the name of a new project), stays inside while open, and goes back to what opened it. - One drawer at a time. Keep destructive actions (delete) on the full page.
- It slides in over 220ms and slides back out the way it came when it closes, still showing its content until it is gone. With reduced motion it appears and disappears without moving.
- Phones: a sheet that fills the bottom and both sides of the screen and is as tall as its content (a short form is a short sheet), up to just below the status bar, where its body scrolls. Its rounded top corners show above it. It slides up over 320ms (
motion-duration-400) and back down when it closes; its bottom clears the home indicator.
- The drawer is an inset glass sheet: it floats a little in from the window edges with every corner rounded, and the page behind blurs slightly.
side: 'right'keeps it a panel from the right on phones too: full height, about 86% of the width (orwidth), rounded on its left side, sliding in and out sideways. Makado's phone menu uses it; everything else is a bottom sheet.- Drag to dismiss (phones). A bottom sheet has a grab bar on top. Drag it down from the bar, the header, or the content once that is scrolled to the top: past about 110px, or a quick flick, it slides away from where you let go; less and it springs back.
side: 'right'on phones fills the whole screen, edge to edge with no rounding, on the page surface, sliding in from the right (the phone menu).placement: 'center'opens it as a large panel in the middle of the screen instead of from the right (a centered peek). Let people choose between the two (and the full page) with an Open as menu in the drawer's actions, as project drawers do. Phones always get the sheet.