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

Examples

Example of a simple dialog.

() => {
   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>
   )
}

A large version vertical centered

() => {
   return (
     <DialogRoot size="lg" placement="center" motionPreset="slide-in-bottom">
        <DialogTrigger asChild>
          <Button size="md">
            Open (large one, centered)
          </Button>
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Dialog Title</DialogTitle>
          </DialogHeader>
          <DialogBody>
            <p>This is an example of text</p>
          </DialogBody>
          <DialogFooter>
            <DialogActionTrigger asChild>
              <Button variant="tertiary">Lukk</Button>
            </DialogActionTrigger>
            <DialogActionTrigger asChild>
              <Button variant="primary">Ok</Button>
            </DialogActionTrigger>
          </DialogFooter>
        </DialogContent>
      </DialogRoot>
   )
}

A responsive dialog. Use size "cover" for fullscreen dialogs

() => {
   return (
     <DialogRoot size={{smDown: "cover", sm: "sm"}} placement="center" motionPreset="slide-in-bottom">
        <DialogTrigger asChild>
          <Button size="md">
            Open responsive dialog
          </Button>
        </DialogTrigger>
        <DialogContent>
          <DialogCloseTrigger />
          <DialogHeader>
            <DialogTitle>Dialog Title</DialogTitle>
          </DialogHeader>
          <DialogBody>
            <p>I am full size on smaller screens</p>
          </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
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

<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