Drawer

The Drawer component is a panel that slides out from the edge of the screen. It is used when you need users to complete a task or view some details without leaving the current page.

Installation

import {
  Drawer,
  DrawerBody,
  DrawerFooter,
  DrawerHeader,
  DrawerOverlay,
  DrawerContent,
  DrawerCloseButton,
} from '@outfitio/outkit';

Usage

Basic Drawer

Focus on specific element

When a form is in the drawer, you might need to set focus on a specific element when the drawer opens. Pass the initialFocusRef prop.

Without the initialFocusRef prop, the drawer will set focus on the first focusable element when it opens.

Drawer Widths

Pass the size prop if you need to adjust the size of the drawer. Values can be xs, sm, md, lg, xl, or full.

Accessibility

• When opening the Drawer, focus is trapped inside the Drawer.
• By default, the drawer sets focus on the first focusable element. If the initialFocusRef prop is passed, the drawer sets focus on the element with the assigned ref.
• After the drawer closes, it'll return focus to the element that triggered it.

Best Practices

• Use the initialFocusRef prop to ensure the close button is never focused by default
• Always use drawers with a DrawerOverlay.

Props

Drawer Props

Drawer composes the Modal component with these extra props:

Other components

• DrawerOverlay, DrawerFooter, DrawerHeader and DrawerBody composes Box component
• DrawerCloseButton composes CloseButton