---
url: https://brand.okrado.com/patterns/drawer/
title: Drawer
description: A panel from the inline end for a record or a longer form, a bottom sheet on a phone.
kind: reference
owner: hmdmsd
updated: 2026-11-03
review_by: 2027-02-28
audience:
  - designer
  - developer
  - agent
---

# Drawer

> A panel from the inline end for a record or a longer form, a bottom sheet on a phone.

A drawer shows a place, not a moment: a record’s details, a long form, an inspector. It keeps the page visible behind it and can be deep-linked. On a phone it becomes a bottom sheet that closes with a swipe down or its grabber button.

## Behaviour

Read from the component manifest, so this is the component’s own contract. See [Overlays](https://brand.okrado.com/patterns/overlays/) for layers, stacking and dismissal shared by all layers.

### `Drawer`

| Stage         | beta                                                                                                                                                                          |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Keyboard      | - Tab and Shift+Tab loop inside the drawer
- Escape closes it
- Enter or Space on the grabber changes the snap point                                                          |
| Dismissal     | * escape: yes
* outside press: yes, unless dirty
* close button: yes, guarded when dirty
* swipe: yes, guarded when dirty
* back gesture: closes it                           |
| Stacking      | Opens under a dialog; an AlertDialog or a dialog may open over it; an AlertDialog may be a terminal third layer; no other third modal.                                        |
| Accessibility | - A modal `role="dialog"` named by its title: focus is trapped and returns to the trigger, the page behind is inert, Escape closes it. The Back gesture closes it on a phone. |
| Pattern       | [APG: dialog modal](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)                                                                                                   |
| Docs          | [Storybook](https://brand.okrado.com/components/?path=/docs/primitives-drawer--docs)                                                                                          |

### `DrawerContent`

| Stage         | beta                                                                                                                                                                                                                 |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Accessibility | - `role="dialog"` named by `title`; a body that scrolls becomes a labelled, focusable region. The grabber's name says what it does (expand or collapse) and swiping has this button as its alternative (WCAG 2.5.7). |
| Docs          | [Storybook](https://brand.okrado.com/components/?path=/docs/primitives-drawer--docs)                                                                                                                                 |

### `DrawerTrigger`

| Stage         | beta                                                                                 |
| ------------- | ------------------------------------------------------------------------------------ |
| Accessibility | - Gets `aria-haspopup="dialog"` and `aria-expanded`.                                 |
| Docs          | [Storybook](https://brand.okrado.com/components/?path=/docs/primitives-drawer--docs) |

### `DrawerClose`

| Stage | beta                                                                                 |
| ----- | ------------------------------------------------------------------------------------ |
| Docs  | [Storybook](https://brand.okrado.com/components/?path=/docs/primitives-drawer--docs) |