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>

Guidelines

A drawer should only be used on smaller screens that have touch, like tablets and mobile.

The content should not be crucial for the user to understand the entirety of the information on the page.

Accessibility

The Drawer component can have two different roles: “dialog“ or “alertdialog“. The default role is “dialog“, but use “alertdialog“ in cases where it is important to notify the user of urgent information that demands immediate attention.

The role “alertdialog“ should only be used when the alert message is associated with interactive controls. If the dialog only contains static information, the role should be “alert“ and you should use an Alert-component.

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
closeOnEscapebooleanWhether to close the dialog when the escape key is pressed. Default true
closeOnInteractOutsidebooleanDefault true
defaultOpenbooleanDefault false
onInteractOutsideReact.ReactNodeFunction called when an interaction happens outside the component
onOpenChangefunctionFunction to call when the dialog's open state changes
openbooleanControlled open state of the drawer
placement"top" | "bottom" | "start"| "end"Default "bottom"
role"dialog" | "alertdialog"Default "dialog"
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
roundedBottom"sm" | "md" | "lg" | "xl" | "2xl"Defaults to "xl"
roundedEnd"sm" | "md" | "lg" | "xl" | "2xl"Defaults to "xl"
roundedStart"sm" | "md" | "lg" | "xl" | "2xl"Defaults to "xl"
roundedTop"sm" | "md" | "lg" | "xl" | "2xl"Defaults to "xl"

<DrawerTrigger />

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

Props

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

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

<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