Side drawer

A side drawer is a modal dialog that slides in from the right side of the screen.

Prop	Type	Required	Default	Description
`'aria-label'`	`string`	—	—	—
`'aria-labelledby'`	`string`	—	—	—
`background`	`base`\|`muted`	—	—	—
`children`	`ReactNode`	Yes	—	—
`id`	`string`	—	—	—
`initialFocusRef`	`MutableRefObject<any>`	—	—	—
`width`	`number \| string`	—	`448`	Any CSS width. Defaults to 448px.

Side drawer — Guidelines

When to use a side drawer instead of a bottom drawer or product menu, and how to think about opting out of its layout primitives.

Tooltip

Tooltips are meant to be used for supplemental content and should never be used for critical information the user needs to complete a task.