Anatomy
Note: Image is not to scale
- Container
- Button icon
- Scrim
Options
Position
The drawer can be attached to any side of the screen or in-place with its trigger
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
In-place to bottom drawer
A drawer can be used as an alternative to a popover. This is best when the content can be too overwhelming in a popover.
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 |
| open | controlled open state used with onOpenChange | enum boolean | ---- | False |
| defaultOpen | should the drawer be open by default (on mount) | enum boolean | ---- | False |
| zIndex | zIndex of drawer @default theme.zIndices.shell | enum number | Token<shell, string, zIndices, wpds> | theme.zIndices.shell | False |
DrawerTrigger
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| variant | enum primary | secondary | cta | ---- | False | |
| density | enum compact | default | ---- | False | |
| isOutline | enum boolean | true | false | ---- | False | |
| icon | enum left | right | none | center | ---- | False |
DrawerCustomTrigger
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| variant | enum primary | secondary | cta | ---- | False | |
| density | enum compact | default | ---- | False | |
| isOutline | enum boolean | true | false | ---- | False | |
| icon | enum left | right | none | center | ---- | False |
DrawerContent
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| position | controls where the drawer comes from, either a side of screen or in-place @default bottom | enum top | right | left | bottom | in-place | 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 |
| inPlaceSelector | Override pinned location for in-place drawer. | string | ---- | False |
DrawerClose
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| variant | enum primary | secondary | cta | primary | False | |
| density | enum default | compact | compact | False | |
| isOutline | enum boolean | true | false | ---- | False | |
| icon | enum left | right | none | center | center | False | |
| sticky | enum (boolean | true | true | False |