Content
- Title the drawer with the name of the thing it shows: the site, logger or alarm.
- Put the primary action last in the footer, and start it with a verb.
- Keep the body to one task. A second task needs its own drawer or page.
Drawer
A panel from the edge of the screen for editing one item while the page stays in view.
Try it
Open the drawer, change a setting, then close it with Escape, the scrim or a button.
Position
Size
Close button
Close on scrim
<WildDrawer
:open="open"
title="Bore 12"
position="right"
size="md"
@close="open = false"
>
…
<template #footer>…</template>
</WildDrawer>When to use
- Use a drawer to edit or inspect one item while the list behind it stays in view.
- Use it for settings and short forms that belong to the current page.
Don’t use it
- To confirm a deletion or other decision that should stop the work. Use a confirm dialog.
- For a short task that doesn’t need the page behind it. Use a dialog.
- For the app’s main navigation. Use Sidebar nav.
- Inside another drawer. Replace the drawer’s content, or move the task to its own page.
Anatomy
A header with the title and close button, a body that scrolls, and a footer for actions. The panel fills the height of the screen.
<WildDrawer :open="open" title="Bore 12" @close="open = false">
…
<template #footer>
<WildButton variant="secondary" size="sm">Cancel</WildButton>
<WildButton size="sm">Save changes</WildButton>
</template>
</WildDrawer>Position
Right is the default, for detail views and forms. Use left for secondary content.
<WildDrawer :open="open" position="left" title="Bore 12" />Accessibility
The drawer is announced as a dialog named by its title. Focus moves into it on open, stays inside it, and returns to the control that opened it.
| Key | What it does |
|---|---|
| Tab / Shift+Tab | Moves through the drawer’s controls, wrapping at either end. |
| Escape | Closes the drawer. An open list inside it closes first. |
| Enter / Space | On the close button, closes the drawer. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Shows the drawer. Required. |
| title | string | — | Heading in the header, and the accessible name. |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'md' | 320, 400, 560, 720px or full; full at 640px and under. |
| position | 'left' | 'right' | 'right' | The edge it slides in from. |
| showClose | boolean | true | Shows the close button in the header. |
| closeOnOverlay | boolean | true | Closes when the scrim is clicked. |
| closeOnEsc | boolean | true | Closes when Escape is pressed. |
| ariaLabel | string | — | Accessible name when there is no title. |
| @close | event | — | Fired when the drawer asks to close. |
| #header | slot | — | Replaces the title. The close button stays. |
| #footer | slot | — | Actions, aligned right. |
Tokens
| Token | Value | Where it lands |
|---|---|---|
| --dialog-overlay | rgba(10, 9, 11, 0.5) | Scrim, shared with the dialog, 2px blur. |
| (no token) | 0 20px 25px -5px … | The dialog’s panel shadow. |
| --global-neutral-grey-500 | #E6E6E6 | Leading edge, header and footer rules. |
| --global-neutral-grey-1200 | #1D1C20 | Title, 18px at 600. |
| --duration-slow | 300ms | Slide in, with --ease-out. |
| --duration-moderate | 200ms | Slide out, with --ease-in. |
| (no token) | 1000 | Z-index, above toolbars. |