WPDS - Drawer | Components

Anatomy

Note: Image is not to scale

Container
Button icon
Scrim

Options

Position

The drawer can be attached to any side of the screen.


Open in Playroom

Optional Close

The drawer close button icon can be optional.


Open in Playroom

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.


Open in Playroom

Optional Scrim color

The scrim color can be changed by defining the color using one of our background colors from our tokens


Open in Playroom

Drawer color

The drawer color can be changed by defining the color using one of our background colors from our tokens.


Open in Playroom

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.


Open in Playroom

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.


Open in Playroom

Content overflow

Content will overflow, both vertically and horizontally, in the drawer by default.


Open in Playroom

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.


Open in Playroom

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.


Open in Playroom

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	enum number \| auto	500	False
width	Width for a left or right positioned drawer @default 400	enum number \| auto	400	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	CSS	----	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 \| none \| center	----	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	CSS<{ sm: `(max-width: ${string})`; md: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; lg: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; xl: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; xxl: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; notS...	----	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 \| none \| center	center	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	CSS<{ sm: `(max-width: ${string})`; md: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; lg: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; xl: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; xxl: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; notS...	----	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
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	CSS<{ sm: `(max-width: ${string})`; md: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; lg: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; xl: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; xxl: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; notS...	----	False
as	WPDS provides an as prop for changing which tag a component outputs.	string	----	False

DrawerScrim

Prop	Description	Type	Default	Required
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	CSS	----	False
lockScroll	Whether scrollbars should be hidden and scroll locked when the scrim is shown @default true	enum boolean	----	False