Drawer usage guidelines

Usage guidelines API

A drawer is a panel that slides in from the right side of the screen. Use drawers for supplemental info and actions related to the main content.

When to use

To display supplemental info and actions without navigating away from the page.
To collect user input through short forms (e.g., editing an item).
To display a list of actions that affect the screen’s content, such as filtering data.

When not to use

For short content that is related to a specific part of the main layout, use a tooltip or popover instead.
For content that can be shown inline, use a disclosure.
For long or complex workflows, use a dedicated page.
For critical decisions or focused interactions that require user attention, use a modal dialog.

import { Button, Drawer, DrawerBody, DrawerRoot } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <DrawerRoot>
      <Button>Open drawer</Button>
      <Drawer title="Drawer">
        <DrawerBody>Drawers can be used to focus the user's attention on a specific subtask.</DrawerBody>
      </Drawer>
    </DrawerRoot>
  );
}

Properties

Size

Preview
Code

Press the buttons to make the drawers appear.

import { Button, Drawer, DrawerBody, DrawerRoot, Stack, Text } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Stack gap={16}>
      <Stack gap={16} direction="horizontal" wrap>
        <DrawerRoot>
          <Button>Small</Button>
          <Drawer title="Small drawer" size="small">
            <DrawerBody>
              This is a small drawer. If viewed on a smaller device, this drawer will fill the available space.
            </DrawerBody>
          </Drawer>
        </DrawerRoot>

        <DrawerRoot>
          <Button>Medium</Button>
          <Drawer title="Medium drawer" size="medium">
            <DrawerBody>
              This is a medium drawer. If viewed on a smaller device, this drawer will fill the available space.
            </DrawerBody>
          </Drawer>
        </DrawerRoot>

        <DrawerRoot>
          <Button>Large</Button>
          <Drawer title="Large drawer" size="large">
            <DrawerBody>
              This is a large drawer. If viewed on a smaller device, this drawer will fill the available space.
            </DrawerBody>
          </Drawer>
        </DrawerRoot>
      </Stack>

      <Text as="p" variant="medium">
        Press the buttons to make the drawers appear.
      </Text>
    </Stack>
  );
}

Value	Use cases
Small (default)	For filters or simple item details.
Medium	For item details that require more space or include editing and form inputs.
Large	For more complex forms or multi-section content. (Use with caution.)

Formatting and layout

Placement

Drawers are placed at the right edge of the screen, spanning the full height of the page. The drawer is placed on a darkened overlay to call the user’s attention to the drawer.

On smaller devices, drawers take up all available space regardless of the declared size.

Content

Drawers can contain any other components. Design best practices should continue to be followed within a drawer.

Actions

Drawers can contain actions for the user to take. These actions are displayed at the bottom of the drawer. The example below shows a drawer with actions:

Preview
Code

import { Button, Drawer, DrawerActions, DrawerBody, DrawerRoot } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <DrawerRoot>
      <Button>Open drawer</Button>
      <Drawer title="Drawer with actions">
        {({ close }) => (
          <>
            <DrawerBody>This drawer contains actions.</DrawerBody>
            <DrawerActions>
              <Button onPress={close}>Cancel</Button>
              <Button variant="primary" onPress={close}>
                Save
              </Button>
            </DrawerActions>
          </>
        )}
      </Drawer>
    </DrawerRoot>
  );
}

Content writing

Use clear, concise, and distinct titles that make it obvious what the drawer contains.
Use clear labels for action buttons and links.

Behaviors and patterns

Triggering a drawer

Drawers are opened by a button or icon button. The trigger should clearly communicate what the drawer will show.

If the drawer controls visible state on the page (e.g., filters), the trigger should reflect that state. This can be done through:

A visual indicator (e.g., badge showing number of active filters)
A label change (e.g., “Filter” → “Filter (3)”)
Styling that signals an “active” state

Dismissing drawers

Users can close the drawer via the close button in the top right, clicking outside, or pressing the Escape key.

Handling unsaved changes

Be aware that when the drawer contains a form with unsaved changes, users may lose progress if they accidentally dismiss it. In these cases, it’s recommended to show a confirmation dialog before closing, to prevent accidental data loss.