Hopp til innhold
Aksel

Komponenter

Dialog

En 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.

BetaOppdatert 5. januar 2026
GithubEndringslogg

Beta

Komponenten er under utvikling, men klar for adopsjon. Vi ønsker gjerne innspill på hvordan den fungerer og hvilke forbedringer vi kan gjøre.

Send innspill

Egnet til:

  • Å få brukeren til å fokusere på en spesifikk oppgave.
  • Å sikre at brukeren får med seg viktig informasjon.

Uegnet til:

  • Innhold som krever langvarig interaksjon.
  • Informasjon som brukeren må ha tilgang til kontinuerlig.

Eksempler

Retningslinjer

Lukke dialog

Sørg for at det alltid er en synlig metode for å lukke dialogen. Det vanligste er å ha en lukk-knapp øverst til høyre. Hvis det ikke passer, må du ha en annen knapp i dialogen som kan brukes til å lukke den, for eksempel en avbryt-knapp.

Trap-focus

Dialogen kommer med en prop "modal" som kan settes til enten true eller trap-focus.

  • true: Oppfører seg som en vanlig modal-dialog, kan ikke interagere med innhold utenfor.
  • trap-focus: Bruker kan interagere med innhold utenfor ved bruk av mus/pointer/touch, og siden kan fortsatt scrolles gjennom.

Fokus vil uansett være låst til dialogen.

Trap-focus bør bare brukes i ekspertsystemer der brukeren vil ha nytte av tilgang til innhold bak dialogen. Det er mest relevant i "drawer"-konfigurasjoner der dialogen er høyrestilt med position="right".

Bruk

Utføre handlinger ved lukking

Hvis du ønsker å utføre en handling når dialogen lukkes, er det to metoder for dette:

  • onOpenChange(nextOpenState, event): Blir kjørt når dialogen ønskes å lukkes. Du får også med event for å kunne avbryte dette før lukke-animasjonen starter.
  • onOpenChangeComplete(nextOpenState): Blir kjørt etter dialogen er helt åpnet eller lukket, og animasjonen er ferdig.

Automatisk testing

Dialogen har både entry- og exit-animasjon, som du kanskje må ta høyde for i tester. Du kan f.eks. bruke waitFor med vitest eller aktivere "prefers-reduced-motion" hvis testmiljøet støtter dette.

Exit-animasjoner vil være mest problematisk, da innhold fortsatt vil være "mounted" etter den er lukket. Da kan du sette AKSEL_NO_EXIT_ANIMATIONS til true før testen i en beforeAll.

Tilgjengelighet

Tilgjengelig navn

Hvis du bruker <Dialog.Title /> vil dialogen automatisk få aria-labelledby koblet til tittelen. Hvis du velger å ikke ha en tittel må du selv manuelt legge til en aria-label eller aria-labelledby på <Dialog.Popup />.

Fokushåndtering

Dialogen tar full kontroll over fokus når den åpnes, og er åpen. Fokuset vil ikke kunne forlate elementet, da dialogen vil bli re-fokusert.

Ved åpning:

  • Selve Dialog.Popup-elementet blir fokusert.
  • Bruk initialFocus for å overstyre dette, f.eks. hvis du vil sette fokus på et søkefelt.

Ved lukking:

  • Hvis du har brukt Dialog.Trigger-elementet, får denne fokus ved lukking.
  • Hvis dialogen ble åpnet uten bruk av Dialog.Trigger, vil fokuset returneres til elementet som hadde fokus før dialogen ble åpnet.
  • Bruk returnFocus for å overstyre dette.

Props

Dialog

open?

  • Type:
    boolean
  • Description:

    Whether the dialog is currently open.

defaultOpen?

  • Type:
    boolean
  • Default:
    false
  • Description:

    Whether the dialog should be initially open.

    To render a controlled dialog, use the open prop instead.

onOpenChange?

  • Type:
    ((nextOpen: boolean, event: Event) => void)
  • Description:

    Event handler called when the dialog is opened or closed.

onOpenChangeComplete?

  • Type:
    ((open: boolean) => void)
  • Description:

    Event handler called after any animations complete when the dialog is opened or closed.

size?

  • Type:
    "medium" | "small"
  • Default:
    "medium"
  • Description:

    Updates sub-component padding + DialogTitle and DialogDescription font-size.

Dialog.Trigger

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLButtonElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

Dialog.CloseTrigger

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLButtonElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

Dialog.Popup

modal?

  • Type:
    true | "trap-focus"
  • Default:
    true
  • Description:

    Determines if the dialog enters a modal state when open.

    • true: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.
    • 'trap-focus': focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.

closeOnOutsideClick?

  • Type:
    boolean
  • Default:
    true
  • Description:

    Determines if the dialog should close on outside clicks.

initialFocusTo?

  • Type:
    RefObject<HTMLElement | null> | (() => HTMLElement | null)
  • Description:

    Will try to focus the given element on mount.

    If not provided, Dialog will focus the popup itself.

returnFocusTo?

  • Type:
    RefObject<HTMLElement | null> | (() => HTMLElement | null)
  • Description:

    Will try to focus the given element on unmount.

    If not provided, Dialog will try to focus the Dialog.Trigger element or the last focused element before the dialog opened.

position?

  • Type:
    "center" | "bottom" | "left" | "right" | "fullscreen"
  • Default:
    "center"
  • Description:

    The position of the dialog relative to the viewport.

width?

  • Type:
    (string & {}) | "small" | "medium" | "large"
  • Default:
    "medium"
  • Description:

    CSS width

    Has no effect when position is set to fullscreen.

height?

  • Type:
    (string & {}) | "small" | "medium" | "large"
  • Description:

    CSS height

    Has no effect when position is set to fullscreen, left or right.

withBackdrop?

  • Type:
    boolean
  • Default:
    modal === true
  • Description:

    Adds a backdrop behind the dialog popup.

role?

  • Type:
    "dialog" | "alertdialog"
  • Default:
    "dialog"
  • Description:

    ARIA role for the dialog popup.

className?

  • Type:
    string

rootElement?

  • Type:
    HTMLElement | null
  • Description:

    An optional container where the portaled content should be appended.

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

Dialog.Header

withClosebutton?

  • Type:
    boolean
  • Default:
    true
  • Description:

    Whether to show a close button in the header. Will trigger onOpenChange when clicked.

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

Dialog.Title

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLHeadingElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

Dialog.Description

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLParagraphElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

Dialog.Body

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

Dialog.Footer

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs