Drawer usage guidelines

Caution

This component is currently in an unstable state and may undergo significant changes in future releases.

A drawer is an overlay element which blocks interaction with outside elements. It can be used to focus the user’s attention on a specific subtask.

When to use

• To display additional content or settings without navigating away from the page.
• To capture user input for a short interaction, like changing a setting.

When not to use

• For content that can be shown inline, use a disclosure.
• For long or complex workflows, use a dedicated page.

Usage

Preview

Open drawer

Press the button to make the drawer appear.

Code

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

export default function Demo() {
  return (
    <Stack gap={16}>
      <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>

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

Properties

Size

Preview

SmallMediumLarge

Press the buttons to make the drawers appear.

Code

import {
  Button,
  UNSTABLE_Drawer as Drawer,
  UNSTABLE_DrawerBody as DrawerBody,
  UNSTABLE_DrawerRoot as 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	For short information or quick inputs (1-2 lines of text).
Medium	Standard drawer for most actions, including forms and decisions.
Large	When more content is needed, like previews, detailed forms, or multiple fields.

Formatting and layout

Placement

Drawers are positioned to the side of the screen, and placed on top of 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

Open drawer

Press the button to make the drawer appear.

Code

import {
  Button,
  UNSTABLE_Drawer as Drawer,
  UNSTABLE_DrawerActions as DrawerActions,
  UNSTABLE_DrawerBody as DrawerBody,
  UNSTABLE_DrawerRoot as DrawerRoot,
  Stack,
  Text,
} from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Stack gap={16}>
      <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>

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

Content writing

• Use clear, concise, and distinct titles that make it obvious what the drawer contains.
• Use clear labels for action buttons and links.
• If the content gets unreasonably long or space becomes an issue, consider using a different solution.

Behaviors

Dismissing drawers

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