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

Code

<DialogRoot />

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

Props

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

<DialogContent />

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

A dialog shows up on top of your interface

Props

Name
Type
Required?
Description
childrenReact.ReactNodeThe content of the modal
onOpenChange() => voidCallback for when the modal is requested to close
openbooleanWhether or not the modal is open

<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