Drawer

A modal dialog that opens on top of all other content.

The Drawer component can be used to display a form that requires user input, display a message to the user that requires their attention or just a menu.

import { Drawer } from '@rewind-ui/core';

function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Drawer open={open} onClose={() => setOpen(false)}>
        <Card className="w-full" bordered={false}>
          <Card.Header className="bg-slate-50">
            <h3 className="text-lg text-slate-800 font-medium">Login</h3>

            <Button variant="secondary" size="sm" onClick={() => setOpen(false)} icon>
              <X size={16} />
            </Button>
          </Card.Header>

          <Card.Body>
            <div className="flex flex-col space-y-4 md:w-[30rem] mx-auto">
              <FormControl>
                <FormControl.Label className="text-sm" required>
                  Email
                </FormControl.Label>
                <FormControl.Input tone="solid" type="email" placeholder="Email..." />
              </FormControl>

              <FormControl>
                <FormControl.Label className="text-sm" required>
                  Password
                </FormControl.Label>
                <FormControl.Input tone="solid" type="password" placeholder="Password..." />
              </FormControl>
            </div>
          </Card.Body>

          <Card.Footer>
            <div className="flex w-full space-x-2">
              <Button className="w-full" color="black" onClick={() => setOpen(false)}>
                Login
              </Button>
            </div>
          </Card.Footer>
        </Card>
      </Drawer>

      <Button onClick={() => setOpen(true)}>Click me!</Button>
    </>
  );
}

Import


Import the Drawer component using the following import statement.

import { Drawer } from '@rewind-ui/core';

Position


The Drawer component can be positioned at the top, bottom, left or right of the screen. The position prop can be used to set the position of the dialog.

<View>
  <Drawer position="top">
    // ...
  </Drawer>

  <Drawer position="bottom">
    // ...
  </Drawer>

  <Drawer position="left">
    // ...
  </Drawer>

  <Drawer position="right">
    // ...
  </Drawer>
</View>

Shadows


Available shadow values are: none, sm, base, md, lg and xl.

<View>
  <Drawer shadow="none" overlayColor="white">
    // ...
  </Drawer>

  <Drawer shadow="sm" overlayColor="white">
    // ...
  </Drawer>

  <Drawer shadow="base" overlayColor="white">
    // ...
  </Drawer>

  <Drawer shadow="md" overlayColor="white">
    // ...
  </Drawer>

  <Drawer shadow="lg" overlayColor="white">
    // ...
  </Drawer>

  <Drawer shadow="xl" overlayColor="white">
    // ...
  </Drawer>
</View>

Overlay


The underlying Overlay component can be customized using the overlayColor, overlayBlur and overlayOpacity props.

Close on click

The closeOnClick prop can be used to close the modal when the overlay is clicked.

<View>
  <Drawer overlayCloseOnClick={true}>
    // ...
  </Drawer>

  <Drawer overlayCloseOnClick={false}>
    // ...
  </Drawer>
</View>

Close on escape


The closeOnEscape prop can be used to close the modal when the escape key is pressed.

<View>
  <Drawer closeOnEscape={true}>
    // ...
  </Drawer>

  <Drawer closeOnEscape={false}>
    // ...
  </Drawer>
</View>

Focus trap


The Drawer component is using a focus trap hook to trap focus within the modal. This means that when the modal is open, the user can only interact with the modal and not with the rest of the page.

API Reference


Properties

PropTypeDescriptionDefault
closeOnEscapebooleanMakes the drawer close when the escape key is pressedtrue
onClose() => voidSets the onClose callback functionundefined
openbooleanSets the open statefalse
overlayBlurOverlayBlurSets the overlay backdrop blur filtersm
overlayCloseOnClickbooleanMakes the modal close when the overlay is clickedtrue
overlayColorOverlayColorSets the overlay colordark
overlayOpacityOverlayOpacitySets the overlay opacity50
positionDrawerShadowSets the drawer positionright
shadowDrawerShadowSets the shadow sizebase

Types

type ModalShadow = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl';

Accessibility


The Drawer component partially adheres to the WAI-ARIA Dialog (Modal) Pattern.

To make the drawer dialog fully accessible, aria-labelledby and aria-describedby props should be provided to the Drawer component. The aria-labelledby prop should point to the id of the Modal header element, and the aria-describedby prop should point to the id of the body element.

Keyboard interactions

KeyDescription
TabMoves focus to the next focusable element
Shift + TabMoves focus to the previous focusable element
EscapeCloses the dialog