Drawer

A Drawer is a panel that slides in from the right edge of the screen, overlaying the main content to present secondary content without navigating away from the current view.

Drawers are triggered by a user action, such as clicking a button, and are dismissible to return focus to the main content or the element that triggered the drawer.

Drawers are useful for workflows that require temporary context, such as editing details, reviewing information, or completing short forms, while keeping the user anchored to the main page.

Installation instructions

yarn add @department-of-veterans-affairs/clinical-design-system-drawer npm install @department-of-veterans-affairs/clinical-design-system-drawer

About the Drawer component

A Drawer component provides a flexible container for supplementary content. Unlike modals, drawers are less disruptive and allow users to maintain context with the page underneath.

Drawers can support multiple use cases such as:

• Quick detail panels
• Inline form interactions
• Step-by-step wizards

A Drawer should never be used to display complex or long-scrolling content that is better suited for a dedicated page.

Anatomy of a Drawer

• Header

• Contains a clear, descriptive title and a close (X) button. It may also include high-level actions such as “Save.” The header can be configured as sticky to remain visible when scrolling.

• Subheader (optional)

• A secondary section, typically with a light-gray background. This area is useful for displaying contextual information such as patient demographics or a patient selector. It helps anchor the user with relevant details before engaging with the main content.

• Body

• The primary content area of the drawer. This section holds the main interaction or information, such as forms, or step-based workflows

Built-in Drawer Features

• Exiting the Drawer: The Drawer can be closed via 3 ways: close button, esc key, and clicking outside the Drawer onto the scrim.
• Keyboard Trapping: Once inside the Drawer, users are keyboard trapped, meaning that they cannot navigate to any elements outside the Drawer. Users can access outside elements again by closing the Drawer.
• Focus on Open/Close: When the Drawer opens, focus will be on the close button. On close, the focus will return to the triggering element.

Drawer Sizes

Large screen (Desktop)

• Default / Minimum width: 500px
• Can expand up to 75% of the viewport width to maintain visibility of the overlay scrim and keep the page context.
• Maximum width: 1400px on large screens to prevent overextension and maintain a readable layout.

Medium screen

• Minimum width: 500px
• Can expand up to 75% of the viewport width to maintain visibility of the overlay scrim and keep the page context.
• Maximum width: 75% of the viewport width. Ensures the drawer doesn’t dominate the limited screen space while still allowing for sufficient content.

Small screen (Mobile)

• The drawer will open in full-screen mode (100% width and height of viewport) to optimize readability and interactions.

Guidance

When to use the drawer component

• You need to keep the user in the current context while presenting additional or related content.

• The action is complementary or secondary to the main task.

• You want to show a multi-step process without moving away from the underlying screen.

When to consider something else

• The interaction requires complete focus or must block all other actions; use a modal instead.

• The content is too complex or long-form and would benefit from full page navigation.

• The drawer is triggered frequently for trivial information—this can overwhelm the user experience.

Usability guidance

• Keep content concise. Use short, actionable text and clear labels.

• Limit complexity. Avoid placing complex forms or large amounts of information in a Drawer. For multi-step workflows, keep to two or three steps.

• Avoid nesting. Do not nest drawers within drawers; use alternative patterns if needed.

Accessibility

• Keyboard Navigation:
  • Ensure all interactive elements are reachable and operable via keyboard.
  • Maintain a logical and intuitive tab order within the drawer.

Technical Documentation

Props

isOpen*	
Toggles the Drawer open and close.
boolean
	-	Setup controls
onClose	
An optional callback to be invoked when the Drawer closes.
((e?: any) => void)
	-	-
headerTitle	
An optional title that appears at the top of the Drawer
string
	-	-
subheader	
An optional prop to add another component above the main content.
ReactNode