Anatomy
Note: Image is not to scale
- Container
- Button icon
- Scrim
Options
Position
The drawer can be attached to any side of the screen.
Optional Close
The drawer close button icon can be optional.
Optional Scrim
The scrim is optional when using the drawer. Should note that without a scrim, it is recommended to have a close button to ensure users can close the drawer if that is desired.
Optional Scrim color
The scrim color can be changed by defining the color using one of our background colors from our tokens
Drawer color
The drawer color can be changed by defining the color using one of our background colors from our tokens.
Height and Width
Drawer width and height can be defined. Height can be defined if the position is top or bottom and width can be defined if the position is right or left.
Behavior
Closing
When the close button icon is rendered, the drawer can be closed by either clicking the scrim or the close button. Note: The drawer can be set to open and will remain open even if the scrim is clicked on.
Content overflow
Content will overflow, both vertically and horizontally, in the drawer by default.
Guidance
Content should be accessible
Do not combine colors of the drawer where text is not accessible to the user. Read more about WCAG accessible contrast requirements.
Avoid full screen
A drawer should never take the fullscreen of the viewer window. The drawer should always leave at least 1/3 of the screen available.
API Reference
DrawerRoot
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| id | content id used for a11y | string | ---- | True |
| onOpenChange | callback to respond to open state | (boolean: any) => void | ---- | False |
| zIndex | Css z-index of drawer @default theme.zIndices.shell | enum ZIndex | Token<shell, string, zIndices, wpds> | theme.zIndices.shell | False |
| open | controlled drawer open state, used with onOpenChange | enum boolean | ---- | False |
| defaultOpen | uncontrolled drawer open on mount | enum boolean | ---- | False |
DrawerContent
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| position | controls which side of the screen the drawer comes from @default bottom | enum top | right | left | bottom | bottom | False |
| height | Height for a top or bottom positioned drawer @default 500 | number | 500 | False |
| width | Width for a left or right positioned drawer @default 400 | number | 400 | False |
| innerClassName | Additional class names for inner drawer element | string | ---- | False |
| loopFocus | When `true`, tabbing from last item will focus first tabbable and shift+tab from first item will focus last tababble. @defaultValue true | enum boolean | true | False |
| trapFocus | When `true`, focus cannot escape the `Content` via keyboard, pointer, or a programmatic focus @defaultValue false | enum boolean | false | False |
DrawerTrigger
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| icon | enum right | left | center | none | ---- | False | |
| variant | enum secondary | primary | cta | ---- | False | |
| density | enum default | compact | ---- | False | |
| isOutline | enum boolean | true | false | ---- | False |
DrawerClose
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| sticky | enum (boolean | true | true | False | |
| icon | enum (right | left | center | none | center | False | |
| variant | enum (secondary | primary | cta | secondary | False | |
| density | enum (default | compact | compact | False | |
| isOutline | enum boolean | true | false | ---- | False |
DrawerCustomTrigger
| Prop | Description | Type | Default | Required |
|---|
DrawerScrim
| Prop | Description | Type | Default | Required |
|---|