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

Dialog

A modal or dialog box is a box that fades in over a page and contains simple information.

FigmaGitHub

Code examples

() => {
   return (
     <DialogRoot size="md">
        <DialogTrigger asChild>
          <Button size="md">
            Open (medium size)
          </Button>
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Dialog Title</DialogTitle>
          </DialogHeader>
          <DialogBody>
            <Textarea 
              label="Dette er et eksempel på en mellomlang venstrestilt." 
              placeholder="Skriv inn tekst her."/>
          </DialogBody>
          <DialogFooter>
            <DialogActionTrigger asChild>
              <Button variant="tertiary">Lukk</Button>
            </DialogActionTrigger>
            <DialogActionTrigger asChild>
              <Button variant="primary">Ok</Button>
            </DialogActionTrigger>
          </DialogFooter>
        </DialogContent>
      </DialogRoot>
   )
}

Guidelines

Dialogs are used when you want to display a new user-interface in the context of the existing one.

Use

Try to:

  • Avoid opening a new dialog when a dialog is already active.
  • Always have a clear way to close the dialog. Use for example the <DialogCloseTrigger />

Accessibility

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

<DialogRoot />

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

Props

Name
Type
Required?
Description
sizestring'xs' | 'sm' | 'md' | 'lg' | 'xl' , default "md"
placementstringDecide where the Dialog will be placed, top, centered, bottom
lazyMountbooleanWhether to enable lazy mounting, default false
motionPresetstring'scale' | 'slide-in-bottom' | 'slide-in-top' | 'slide-in-left' | 'slide-in-right' | 'none' The motionPreset of the component
aria-labelstringHuman readable label for the dialog, in event the dialog title is not rendered
onOpenChangefunctionCallback to be invoked when the dialog is opened or closed
rolestring'dialog' | 'alertdialog' , define the dialog's role
modalbooleanif "true" the focus remain on dialog until handling om with pointer or keyboard ( esc)

<DialogContent />

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

A dialog shows up on top of your interface

Props

Name
Type
Required?
Description
openbooleanWhether or not the modal is open
onOpenChange() => voidCallback for when the modal is requested to close
childrenReact.ReactNodeThe content of the modal
positionerPropsChakraDialog.PositionerPropsPropagates the props to Chakra's Dialog.Positioner component

<DialogCloseTrigger />

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

The close button of the dialog

<DialogHeader />

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

The main heading of the dialog

Props

Name
Type
Required?
Description
childrenReact.ReactNodeThe descriptive heading text of the modal. Also used by assistive technologies

<DialogBody />

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

The content of the dialog

Props

Name
Type
Required?
Description
childrenReact.ReactNodeThe main content of the modal

<DialogFooter />

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

Contains actions that's stuck to the bottom of the footer

Props

Name
Type
Required?
Description
childrenReact.ReactNodeTypically buttons