# Flux 2.0 — Drawer
A full-height panel over the page, from its end edge, to read or edit one record without leaving the list.
Reference: https://flux.kaptio.com/components/drawer/
Requires: https://flux.kaptio.com/tokens/v2/flux.css and flux-components.css
## Use it when
Shows a record, or a short task on it, while the page it came from stays in place behind. It is a native dialog opened with showModal(), so focus moves into it, the page behind is inert, Escape or a click outside closes it and focus returns to the button that opened it. The header names the record, the body scrolls on its own, and the action row stays pinned at the bottom.
## Do not use it when
Not for a decision that must be made before anything else; use a Modal. Not for a list and its detail that people move through one after another; use the List and detail split view, which keeps both visible. Not for a long task with steps; give it its own page or a wizard. Never open a drawer from a drawer.
## Markup
### Record
### Task
## API
- dialog (element): The native element. Open it with showModal(), never by toggling a class or the open attribute.
- flux-drawer (class): On the dialog. Give it an id and aria-labelledby pointing at the title.
- flux-drawer--lg (class): The wide drawer, for a record with a table in it.
- flux-drawer__header | __heading | __title | __meta | __close (class): The header row: the heading block, its title and context line, and the close button.
- flux-drawer__body (class): The scrolling content.
- flux-drawer__footer (class): The pinned action row.
- flux-drawer__form (class): A form wrapping header, body and footer, so a submit button in the footer submits the fields in the body.
- commandfor | command (attribute): On a button: the drawer’s id, and show-modal or close. flux-components.js supplies them where the browser does not.
## Accessibility
- showModal() traps focus, makes the page inert and handles Escape; a div-based drawer reimplements all three.
- Name the drawer with aria-labelledby pointing at its title, and give the close button an accessible name.
- Focus returns to the opener when the drawer closes. If the opener is removed, for instance because the record was deleted, move focus to the list it was in.
- Reduced motion removes the slide; the base layer handles it.
## Keyboard
- Escape: Closes the drawer. Native behaviour — do not prevent it.
- Tab: Cycles within the drawer only.
- Click outside: Closes the drawer. Requires flux-components.js.
## Tokens
- --flux-drawer-width | -width-lg | -padding | -duration
- --flux-drawer-bg | -shadow | -backdrop | -divider
## Do
- Title the drawer with the record’s reference or the task it performs.
- Keep the page behind as it was, so closing the drawer returns to the same place in the list.
## Do not
- Do not open a drawer from a drawer, or a modal from a drawer for anything but a confirmation.
- Do not use a drawer for content people need beside the page while they work. Use the List and detail split view.
- Do not round the drawer’s corners or give it a border; it is an edge of the window, not a card.