Drawer

The Drawer component is a slide-over panel that overlays content, often used for navigation or displaying additional information without navigating away from the current page.

Report Issue Github

Usage

Basic Usage


function Example() {
  const [isOpen, setIsOpen] = React.useState(false);
  const toggleDrawer = () => {
    setIsOpen(!isOpen);
  };
  return (
    <>
      <Button variant="ghost" onClick={toggleDrawer}>
        Open
      </Button>
      <Drawer.Root overlayVariant="translucent" open={isOpen} onClose={toggleDrawer}>
        <Drawer.Header title={<Icon type="Zap" />} />
        <Drawer.Content>
          <Menu.Root
            defaultValue=""
            items={[
              { value: 'home', label: 'Home', iconPrepend: <Icon type="Home" />, href: '#home' },
              { value: 'about', label: 'About', iconPrepend: <Icon type="HelpCircle" />, href: '#about' },
              { value: 'contact', label: 'Contact', iconPrepend: <Icon type="Package" />, href: '#contact' },
            ]}
          />
        </Drawer.Content>
        <Drawer.Footer align="end">
          <Flex width="100%" height="100%" justify={'end'} align={'center'}>
            <Icon type="Github" />
          </Flex>
        </Drawer.Footer>
      </Drawer.Root>
    </>
  );
}

API

Props

Drawer

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`open`	`boolean`	-	-
`width`	`CSSProperties`	-	-
`placement`	`'left' \| 'right'`	-	-
`variant`	`'default' \| 'confirm'`	-	-
`outlined`	`boolean`	-	-
`overlatVariant`	`'transparent' \| 'translucent`	-	-
`onClose`	`() => void`	-	-
`MarginProps`	`Token<MarginProps>`	-	-
`color`	`ThemeAccentColor`	-	-
`size`	`Responsive<Size>`	`'medium'`	-

Header

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`title`	`ReactNode`	-	-
`action`	`ReactNode`	-	-

Content

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-

Footer

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-

Callout

Modal