Drawer 10.17.4

ARIA

RTL

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

Based on Headless UI.

Anatomy

<Drawer>
  <Drawer.Panel>...</Drawer.Panel>
  <Drawer.Backdrop />
</Drawer>

Default

By default the <Drawer /> component opens from the end of the screen.

"use client";

import { useState } from "react";
import { Button, Drawer } from "@heathmont/moon-core-tw";

export const Default = () => {
  const [isOpen, setIsOpen] = useState(false);
  const handleClick = () => setIsOpen(true);
  return (
    <>
      <Button variant="outline" onClick={handleClick}>
        Show default Drawer
      </Button>
      <Drawer open={isOpen} setOpen={setIsOpen}>
        <Drawer.Panel>Default Drawer</Drawer.Panel>
      </Drawer>
    </>
  );
};

export default Default;

Positions

<Drawer.Panel /> supports flexible positioning. Specify the desired appearance direction by using position prop.

"use client";

import { useState } from "react";
import { Button, Drawer } from "@heathmont/moon-core-tw";

export const Positions = () => {
  const [isStartOpen, setIsStartOpen] = useState(false);
  const [isTopOpen, setIsTopOpen] = useState(false);
  const [isBottomOpen, setIsBottomOpen] = useState(false);
  const handleStartClick = () => setIsStartOpen(true);
  const handleTopClick = () => setIsTopOpen(true);
  const handleBottomClick = () => setIsBottomOpen(true);
  return (
    <>
      <Button variant="outline" onClick={handleStartClick}>
        Show Drawer at start of screen
      </Button>
      <Button variant="outline" onClick={handleTopClick}>
        Show Drawer at top of screen
      </Button>
      <Button variant="outline" onClick={handleBottomClick}>
        Show Drawer at bottom of screen
      </Button>
      <Drawer open={isStartOpen} setOpen={setIsStartOpen}>
        <Drawer.Panel position="start">
          <div className="flex justify-between items-center p-3 border-b border-trunks">
            <p>Screen start aligned Drawer</p>
          </div>
          <div className="p-3">Drawer content</div>
        </Drawer.Panel>
      </Drawer>
      <Drawer open={isTopOpen} setOpen={setIsTopOpen}>
        <Drawer.Panel position="top">
          <div className="flex justify-between items-center p-3 border-b border-trunks">
            <p>Screen top aligned Drawer</p>
          </div>
          <div className="p-3">Drawer content</div>
        </Drawer.Panel>
      </Drawer>
      <Drawer open={isBottomOpen} setOpen={setIsBottomOpen}>
        <Drawer.Panel position="bottom">
          <div className="flex justify-between items-center p-3 border-b border-trunks">
            <p>Screen bottom aligned Drawer</p>
          </div>
          <div className="p-3">Drawer content</div>
        </Drawer.Panel>
      </Drawer>
    </>
  );
};

export default Positions;

With backdrop

Drawer with <Drawer.Backdrop /> places all content and UI elements besides panel behind a backdrop (scrim).

"use client";

import { useState } from "react";
import { Button, Drawer } from "@heathmont/moon-core-tw";

export const WithBackdrop = () => {
  const [isOpen, setIsOpen] = useState(false);
  const handleClick = () => setIsOpen(true);
  return (
    <>
      <Button variant="outline" onClick={handleClick}>
        Show Drawer with Backdrop
      </Button>
      <Drawer open={isOpen} setOpen={setIsOpen}>
        <Drawer.Panel>
          <div className="flex justify-between items-center p-3 border-b border-trunks">
            <p>Drawer with Backdrop</p>
          </div>
          <div className="p-3">Drawer content</div>
        </Drawer.Panel>
        <Drawer.Backdrop />
      </Drawer>
    </>
  );
};

export default WithBackdrop;

With close

Customize the inner content of <Drawer /> as you need based on your product.

"use client";

import { useState } from "react";
import { Button, Drawer, IconButton } from "@heathmont/moon-core-tw";
import { ControlsCloseSmall } from "@heathmont/moon-icons-tw";

export const WithClose = () => {
  const [isOpen, setIsOpen] = useState(false);
  const handleClick = () => setIsOpen(true);
  const handleClose = () => setIsOpen(false);
  return (
    <>
      <Button variant="outline" onClick={handleClick}>
        Show Drawer with Close button
      </Button>
      <Drawer open={isOpen} setOpen={setIsOpen}>
        <Drawer.Panel>
          <div className="flex justify-between items-center p-3 border-b border-trunks">
            <p>Header</p>
            <IconButton
              variant="ghost"
              onClick={handleClose}
              aria-label="Close"
            >
              <ControlsCloseSmall />
            </IconButton>
          </div>
          <div className="p-3">Drawer content</div>
        </Drawer.Panel>
      </Drawer>
    </>
  );
};

export default WithClose;

Drawer

These are props specific to the Drawer component:

Name	Type	Default
className	string	-
open*	boolean	false
setOpen*	(value: boolean) => void	-

Properties indicated with * are required.

Drawer.Panel

These are props specific to the Drawer.Panel component:

Name	Type	Default
className	string	-
position	"top" \| "bottom" \| "start" \| "end"	end

Drawer.Backdrop

These are props specific to the Drawer.Backdrop component:

Name	Type	Default
className	string	-