Drawer — Cayuse Design System

Examples

Drawer — opens from the right of the stage

The view behind the drawer stays visible and in context.

html

<div class="cds-drawer" role="dialog" aria-labelledby="drawer-title">
  <div class="cds-modal__header">
    <h2 class="cds-modal__title" id="drawer-title">Reviewer comments</h2>
    <button type="button" class="cds-modal__close" aria-label="Close drawer">✕</button>
  </div>
  <div class="cds-modal__body cds-scroll">…</div>
</div>

<!-- Full-width variant -->
<div class="cds-drawer cds-drawer--full">…</div>

Figma properties

Property	Values	Notes
`Size`	Partial · Full Width	Partial keeps the view behind visible; Full Width does not.
`Drawer Heading`	text	The title.
`Large Drawer Content` / `Small Drawer Content`	instance swap	Slotted content for each size.

A full-width drawer is not a drawer

The whole reason to use a drawer instead of a modal is that the user keeps sight of the context it relates to. At full width that is gone, and what is left is a modal that slides — or, per the note on the Basic Modal page, something that should have been a page.

Use Full Width sparingly, and when you reach for it, check whether the content deserves its own URL instead.

Usage

When to use it

Use for supporting detail about something in the main view — comments, history, a record preview.
Use where the user will move between several items and want the panel to stay put.
Keep the related row or record visible behind the drawer.
Make it scrollable, with a visible scrollbar.

When not to use it

Do not use a drawer for a decision — that is a Confirmation Alert.
Do not use one for a task unrelated to the view behind it; that is a modal or a page.
Do not stack drawers.
Do not use Full Width where a page would serve better.

Accessibility

A non-modal drawer — where the user can still interact with the page behind — uses role="dialog" without aria-modal="true", and does not trap focus.
A modal drawer sets aria-modal="true", traps focus and makes the background inert. Decide which one you are building; the difference is behavioural, not visual.
Escape closes either. Focus returns to the trigger.
Give it a heading, and label the dialog with it.
On narrow viewports a partial drawer will cover the view — at that width it is effectively modal, and should behave like one.

Tokens consumed

Token	Applied to	Resolves to
`--container-background`	Panel surface	`--color-white`
`--container-border`	Left edge and internal rules	`--color-gray-300`
`--scrollbar-track` / `--scrollbar-thumb`	Scrollable body	gray-200 / gray-300
`--type-section-heading-*`	Heading	20 / 28 / Bold