Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

Drawer

Drawers are modals that show up from a certain side.

FigmaGitHub

Examples

A simple drawer

<Drawer placement="bottom" size="md">
  <DrawerTrigger asChild>
    <Button variant="secondary" size="md">
      Open a simple drawer
    </Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Drawer Title</DrawerTitle>
      <DrawerCloseTrigger />
    </DrawerHeader>
    <DrawerBody>
      <Text variant="sm">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </Text>
    </DrawerBody>
  </DrawerContent>
</Drawer>

A fullscreen drawer with the customised DrawerFullScreenHeader and buttons in the DrawerFooter

() => {
  const [open, setOpen] = React.useState(false);
  return (
   <Drawer placement="end" size="full">
      <DrawerTrigger onClick={() => setOpen(true)} asChild>
        <Button variant="primary" size="md">
          Open a fullscreen drawer
        </Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerFullScreenHeader title="FullScreenDrawer" />
        <DrawerBody>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </DrawerBody>
        <DrawerFooter>
          <Button variant="ghost">Cancel</Button>
          <Button variant="primary">Save</Button>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}

A drawer with scroll

<Drawer placement="bottom" size="md">
  <DrawerTrigger asChild>
    <Button variant="secondary" size="md">
      Open 
    </Button>
  </DrawerTrigger>
  <DrawerContent maxHeight="30vh">
    <DrawerHeader>
      <DrawerTitle>Drawer Title</DrawerTitle>
      <DrawerCloseTrigger />
    </DrawerHeader>
    <DrawerBody>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </DrawerBody>
    <DrawerFooter>
      <Button variant="ghost">Cancel</Button>
      <Button variant="primary">Save</Button>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Code

<Drawer />

import { Drawer } from "@vygruppen/spor-react";

A useful drawer for the most common usecases

Props

Name
Type
Required?
Description
childrenReact.ReactNodeThe content of the drawer
placement"top" | "bottom" | "start"| "end"
size'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'Default "md"

<DrawerContent />

import { DrawerContent } from "@vygruppen/spor-react";

The content of a drawer. Should contain a DrawerBody and an optional DrawerFooter

Props

Name
Type
Required?
Description
childrenReact.ReactNode
openboolean
roundedTop"sm" | "md" | "lg" | "xl" | "2xl"Defaults to "xl"
roundedBottom"sm" | "md" | "lg" | "xl" | "2xl"Defaults to "xl"
roundedStart"sm" | "md" | "lg" | "xl" | "2xl"Defaults to "xl"
roundedEnd"sm" | "md" | "lg" | "xl" | "2xl"Defaults to "xl"

<DrawerTrigger />

import { DrawerTrigger } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
childrenReact.ReactNode
asChildbooleanUse to merge the component with the child component

<DrawerCloseTrigger />

import { DrawerCloseTrigger } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
asChildboolean

<DrawerHeader />

import { DrawerHeader } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
childrenReact.ReactNode

<DrawerFullScreenHeader />

import { DrawerFullScreenHeader } from "@vygruppen/spor-react";

Extends BoxProps

Props

Name
Type
Required?
Description
titlestring
backTriggerboolean

<DrawerTitle />

import { DrawerTitle } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
childrenReact.ReactNode

<DrawerBody />

import { DrawerBody } from "@vygruppen/spor-react";

The content of the Drawer

Props

Name
Type
Required?
Description
childrenReact.ReactNode

<DrawerFooter />

import { DrawerFooter } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
childrenReact.ReactNode

<DrawerActionTrigger />

import { DrawerActionTrigger } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
childrenReact.ReactNode