## Anatomy
The Drawer consists of five primary elements that work together to slide content onto the page from the right.
1. Header
2. Close action
3. Body content
4. Backdrop
5. Footer actions
## Options
The Drawer supports flexible content, footer actions, and sizing configurations to accommodate various flyout scenarios.
### Body content
Drawer supports any type of content in the body.
```tsx lines theme={null}
import { Drawer, Flex, TextField, Radio, Button } from "@servicetitan/anvil2";
function App() {
return (
Header textCancel
);
}
export default App;
```
### Footer actions
Drawer supports several types of action groupings. These typically include one primary action and may include elements such as links or destructive actions.
```tsx lines theme={null}
import { Drawer, Button } from "@servicetitan/anvil2";
function App() {
return (
Cancel
);
}
export default App;
```
```tsx lines theme={null}
import { Drawer, Button, Flex } from "@servicetitan/anvil2";
function App() {
return (
{/* spacer */}
Cancel
);
}
export default App;
```
```tsx lines theme={null}
import { Drawer, Link, Flex, Button } from "@servicetitan/anvil2";
function App() {
return (
Learn more
{/* spacer */}
Cancel
);
}
export default App;
```
```tsx lines theme={null}
import { Drawer, Button } from "@servicetitan/anvil2";
function App() {
return (
Cancel
);
}
export default App;
```
### Sizing
Drawer supports 4 sizing options: small, medium (default), large, and extra large.
```tsx lines theme={null}
import { Drawer, Button } from "@servicetitan/anvil2";
function App() {
return (
Header textBody text in the Drawer.Cancel
);
}
export default App;
```
```tsx lines theme={null}
import { Drawer, Button } from "@servicetitan/anvil2";
function App() {
return (
Header textBody text in the Drawer.Cancel
);
}
export default App;
```
```tsx lines theme={null}
import { Drawer, Button } from "@servicetitan/anvil2";
function App() {
return (
Header textBody text in the Drawer.Cancel
);
}
export default App;
```
```tsx lines theme={null}
import { Drawer, Button } from "@servicetitan/anvil2";
function App() {
return (
Header textBody text in the Drawer.Cancel
);
}
export default App;
```
| Sizing | Width | Height |
| ---------------- | --------------- | ------ |
| Small | 22.5rem / 360px | 100% |
| Medium (default) | 35rem / 560px | 100% |
| Large | 48rem / 768px | 100% |
| Extra Large | 70rem / 1120px | 100% |
## Behavior
The Drawer responds to content overflow and scrolling requirements while maintaining focus management.
### Overflow handling
Header and footer content in Drawer wraps rather than truncates. Footer actions support custom overflow behavior when needed.
```tsx lines theme={null}
import { Drawer, Link, Flex, Button } from "@servicetitan/anvil2";
import { core } from "@servicetitan/anvil2/token";
function App() {
return (
Drawer Title that Will Overflow to Another Line with Enough Words
Body text in the Drawer.
Learn more
A Very Long Secondary Action that Wraps
);
}
export default App;
```
### Scrolling
The body region of Drawer scrolls when space is not available. The footer can be configured to scroll with the body but is typically sticky.
```tsx lines theme={null}
import { Drawer, Button } from "@servicetitan/anvil2";
function App() {
return (
Header text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum
justo id eros interdum, quis malesuada diam malesuada. Etiam auctor
pharetra nisl vitae aliquet. Curabitur gravida diam eros, nec pharetra
augue convallis non. Maecenas nibh felis, blandit ac congue at, cursus
sed odio. Cras quam risus, suscipit eget velit id, varius faucibus est.
Integer in quam eget lacus consectetur posuere consectetur mollis quam.
Morbi sapien felis, venenatis ac dui a, laoreet placerat velit. Nam
luctus eu lectus sed consequat. Nam mi elit, auctor ut magna et,
accumsan facilisis sapien.
Donec a mi eu mauris dignissim dictum non at erat. Sed hendrerit metus
dolor, in congue ligula vestibulum nec. Quisque ac velit sollicitudin,
laoreet mauris quis, rutrum urna. Nam euismod nisi vitae mi commodo, id
dapibus arcu convallis. Quisque tincidunt aliquam elit. Donec porttitor
lacus eget tellus finibus, luctus dapibus mi auctor. Praesent sed
tincidunt tortor. Aliquam non orci at nisl tincidunt dapibus. Mauris a
interdum augue. Nunc ac augue ornare, mattis orci eu, tempus tortor. Ut
dignissim velit sit amet lorem tempus, a dictum mi commodo.
Maecenas neque nulla, fringilla vel risus sit amet, placerat accumsan
tortor. Nam consequat massa non laoreet posuere. Cras at massa in leo
varius tempus. Nam sed convallis sapien. Integer pretium risus vel
fermentum consequat. Integer convallis in massa sit amet posuere. Cras
gravida ut odio eget laoreet. Pellentesque lobortis enim nec orci
venenatis, in auctor enim molestie. Nullam felis lectus, dictum ut magna
vel, dignissim ultricies erat. Suspendisse potenti. Morbi non lacinia
dui, at fermentum velit. Aenean sodales ullamcorper lectus, in mollis
lacus vulputate vel. Vivamus accumsan lorem odio, et lacinia nunc
rhoncus sed. Quisque dapibus nisl at orci sodales, vitae volutpat nulla
tincidunt. Fusce tristique sed erat in ullamcorper. In porttitor lectus
nec est porttitor, eget dignissim ex finibus.
Nulla facilisi. Phasellus mollis iaculis nisi sed pulvinar. Ut id
vehicula enim, eget euismod nibh. Vestibulum egestas facilisis mauris
sit amet porttitor. Morbi at laoreet sem. Fusce eu mauris a dui
efficitur tristique. Integer ultrices, leo nec bibendum sodales, neque
sem congue ipsum, non molestie metus tortor ac ligula. Sed cursus diam
sed odio cursus commodo eu nec ex. Donec sed lacus nec felis vehicula
hendrerit. Curabitur consectetur ultricies odio eu suscipit.
Cras eu blandit tortor, a semper nibh. Proin vel felis tellus.
Vestibulum dignissim diam eget sem tincidunt, sit amet vehicula justo
bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Phasellus tortor diam, viverra in mattis ac, lobortis id tellus.
Praesent laoreet condimentum magna ac venenatis. Etiam massa libero,
volutpat in erat a, venenatis varius lorem.
Cancel
);
}
export default App;
```
## Usage Guidelines
### When to Use
Use Drawer to show information or a task without navigating to another page.
#### Consider placing content on-page over a Drawer
Directly integrating content that would be in a Drawer on the page allows users to continue to both see and interact with the rest of the content on the page.
### When not to use
#### Don't use for exclusive, essential flows
Drawers should not be used for steps essential to a flow. The exception is if the Drawer is acting as a supplemental, redundant place for those steps.
#### Don't use to communicate page errors
Using a Drawer to convey errors is an anti-pattern. It requires a user to actively remember its contents once the Drawer is closed. See the error pattern for alternatives.
#### Don't use to confirm actions
Use the [Dialog](/docs/web/components/dialog/design) for confirmations instead.
### Alternatives
#### Drawer vs Dialog
| | Dialog | Drawer |
| ---------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------- |
| Complete a secondary task | Simple, one step tasks | 1-3 steps at most. Tasks with more steps should be on a separate page |
| Display additional information related to the context in the main page | Yes, ideal for short content | Yes, ideal for longer, more complex information |
| Confirm user actions | Yes | No |
### How to Use
#### Position the Drawer on the right
Drawers always appear on the right side of the page.
**Do****Don't**
#### Always use a backdrop
The backdrop reinforces the focused nature of Drawer and prevents de-synced states. If side content must not have a backdrop, integrate the content directly on the page instead.
**Do**
**Don't**
#### Always extend the Drawer to the screen's full height
Drawers will always extend to 100% the height of the browser window. Don't offset the Drawer to fit below other elements on the page.
**Do**
**Don't**
#### Dialogs on top of Drawers
Avoid stacking overlay elements. A confirmation message through a Dialog is an exception. If a confirmation Dialog is needed within a Drawer, use an alternative to Drawer.
## Content
Content within the Drawer should be clear, organized, and support the task or information being displayed.
## Keyboard Interaction
Users can navigate the Drawer using standard keyboard controls.
| Key | Interaction |
| ------ | -------------------------------------------------- |
| Tab | Cycles through tab-able elements within the Drawer |
| Escape | Closes the Drawer |
### Accessibility
#### Focus management
There are a few different things to keep in mind with the Drawer's focus behavior.
##### Trap focus within the Drawer
By default, the Drawer will trap focus within itself. Elements outside of the Drawer would not be accessible by keyboard.
##### First focus management
What elements Drawer focuses on open depends on a few factors:
* If the body content has a focusable element, Drawer focuses on the first of these elements.
* If the body does not have a focusable element, the following is the preferred first-focus element:
* With no actions at all, focus first on the close action.
* When a primary action exists, focus first on the primary action.
* When a primary destructive action exists, focus first on the secondary cancel action.
##### Return focus on close
When a Drawer is closed and the original context that triggered the Drawer is still present, focus should return to the element that triggered the Drawer.
For more guidance on focus management with dynamic content, see [changing content best practices](/docs/accessibility/changing-content).
