Skip to content
Vy logo
  • Spor
  • Resources
Components

Drawer

Drawers are modals that show up from a certain side.

FigmaGitHub

Code examples

<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>

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