Dokumentasjon

Dialog er lansert!

5. januar 2026

Fra versjon 7.37.0 er den nye Dialog-komponenten tilgjengelig 🎉

Hva er Dialog?

Dialog er et midlertidig vindu som åpnes på siden. Dialogen fanger brukerens oppmerksomhet og fokus, samtidig som konteksten til nettsiden beholdes. Den er nyttig når brukeren må ta stilling til informasjon eller fokusere på en spesifikk oppgave.

I praksis er dette en oppdatert og forbedret versjon av dagens Modal.

Dialog versus Modal

Dialog er ment som en ny og forbedret versjon av dagens Modal, og skal erstatte Modal 100% på sikt.

Fleksibel plassering: center, left, right, bottom og fullscreen.
Innebygd navngiving av Dialog ved bruk av Dialog.Title
Bedre fokushåndtering ved åpning/lukking.
Innebygd state-håndtering med Dialog.Trigger og Dialog.CloseTrigger.
Entry- og exit-animasjon.

Dialog garanterer også open/close state, noe dagens Modal ikke gjør da nettlesere håndterer html-elementet <dialog /> ulikt.

Bedre API

Dialog kommer med et enklere API å forholde seg til, da komponenten er basert mer på komposisjon. Du trenger ikke selv håndtere open/close-state eller en ref.

Modal

<div>
  <Button onClick={() => ref.current?.showModal()}>Åpne modal</Button>
  <Modal ref={ref} header={{ heading: "Overskrift" }}>
    <Modal.Body>
      <BodyLong>>Body</BodyLong>
    </Modal.Body>
    <Modal.Footer>
      <Button type="button" onClick={() => ref.current?.close()}>
        Primær
      </Button>
      <Button
        type="button"
        variant="secondary"
        onClick={() => ref.current?.close()}
      >
        Sekundær
      </Button>
    </Modal.Footer>
  </Modal>
</div>

Dialog

<Dialog>
  <Dialog.Trigger>
    <Button>Åpne dialog</Button>
  </Dialog.Trigger>
  <Dialog.Popup>
    <Dialog.Header>
      <Dialog.Title>Overskrift</Dialog.Title>
      <Dialog.Description>En kort beskrivelse av dialogen.</Dialog.Description>
    </Dialog.Header>
    <Dialog.Body>
      <BodyLong>Body</BodyLong>
    </Dialog.Body>
    <Dialog.Footer>
      <Dialog.CloseTrigger>
        <Button>Primær</Button>
      </Dialog.CloseTrigger>
      <Dialog.CloseTrigger>
        <Button variant="secondary">Sekundær</Button>
      </Dialog.CloseTrigger>
    </Dialog.Footer>
  </Dialog.Popup>
</Dialog>

Dialog er lansert!

Hva er Dialog?

Dialog versus Modal

Bedre API

Forrige endring

Versjon 7.37.0

Neste endring

Versjon 7.38.0