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.

Source code

Theme

Storybook

Overlay color

Overlay opacity

Position

Shadow

Close on escape

Close on overlay click

import { Drawer } from '@almond-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 '@almond-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

Prop	Type	Description	Default
closeOnEscape	`boolean`	Makes the drawer close when the escape key is pressed	`true`
onClose	`() => void`	Sets the onClose callback function	`undefined`
open	`boolean`	Sets the open state	`false`
overlayBlur	`OverlayBlur`	Sets the overlay backdrop blur filter	`sm`
overlayCloseOnClick	`boolean`	Makes the modal close when the overlay is clicked	`true`
overlayColor	`OverlayColor`	Sets the overlay color	`dark`
overlayOpacity	`OverlayOpacity`	Sets the overlay opacity	`50`
position	`DrawerShadow`	Sets the drawer position	`right`
shadow	`DrawerShadow`	Sets the shadow size	`base`

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

Key	Description
`Tab`	Moves focus to the next focusable element
`Shift` + `Tab`	Moves focus to the previous focusable element
`Escape`	Closes the dialog

Text Dropdown