Drawer
A drawer is a panel that slides in from the side of the screen.
When to use
- Details about an item selected in a list, when the list needs to stay visible.
- A secondary task related to what is on screen, such as filters or a history of changes.
- Content that only makes sense next to what is on screen.
When not to use
- A decision that blocks everything else. Use a modal.
- A short confirmation. A drawer is too much for it.
- Primary content. If it is the main thing, give it a page.
- Anything people will want to link to. A drawer has no URL of its own.
Guidance
Do
Refund request
Opened by Ava Mensah, 12 Oct. Waiting on billing.
Title the drawer with the item it shows, so people can tell which row they opened.
Don't
Details
Opened by Ava Mensah, 12 Oct. Waiting on billing.
Do not title it Details. Every drawer shows details, so the title does not say which item is open.
Intensity
How much attention each of this component's grounds uses, scored against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| drawer | surface | 0.000Substrate | 0.000Substrate |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. See intensity.
Content
What to write, and what to leave out.
- Title the drawer with the subject, not the word Details.
- Keep the body to content about the selected item. Put anything else on a page.