Skip to content
Vy logo
  • Identitet
  • 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
placement"top" | "bottom" | "start"| "end"
size'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'Default "md"
closeOnInteractOutsidebooleanDefault true
closeOnEscapebooleanWhether to close the dialog when the escape key is pressed. Default true
role"dialog" | "alertdialog"Default "dialog"

<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