Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • komponenter
      • Page
      • HGrid
      • HStack
      • VStack
      • Box
      • Hide
      • Show
      • Bleed
      • Eksperimenter 🧪
      • Accordion
      • ActionMenuBeta
      • Alert
      • Button
      • Chat
      • Checkbox
      • Chips
      • ComboboxBeta
      • CopyButton
      • DatePicker
      • Dropdown
      • ErrorSummary
      • ExpansionCard
      • FileUpload
      • FormProgressNy
      • FormSummaryNy
      • GuidePanel
      • HelpText
      • InternalHeader
      • Link
      • List
      • Loader
      • Modal
      • MonthPicker
      • Navpoleonskake
      • Pagination
      • Popover
      • ProgressBar
      • Provider
      • Radio
      • ReadMore
      • Search
      • Select
      • Skeleton
      • Stepper
      • Switch
      • Table
      • Tabs
      • Tag
      • Textarea
      • TextField
      • Timeline
      • ToggleGroup
      • Tooltip
      • Typography
      • ConfirmationPanelAvviklet
      • LinkPanelAvviklet
      • PanelAvviklet

Modal

Oppdatert 9. mai 2025Stabil
GithubYarn FigmaEndringslogg

Innhold på siden

  • Intro
  • Eksempler
    • Modal på mobil
  • Retningslinjer
    • Design
    • Bruk
    • Innhold
    • Lukke modal
    • Automatisk testing
  • Tilgjengelighet
    • Tilgjengelig navn
    • Fokushåndtering
    • Interaksjon med tastatur
    • Tab-rekkefølge
    • Sideskroll
  • Figma
  • Props
    • Modal
    • Modal.Header
    • Modal.Body
    • Modal.Footer
  • Tokens

Intro

En modal er et midlertidig vindu som åpnes på en nettside. Modalen fanger brukerens oppmerksomhet, samtidig som konteksten til nettsiden beholdes. Den er nyttig når brukeren må ta stilling til informasjon eller fokusere på en spesifikk oppgave.

Egnet til:

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

Uegnet til:

  • Omfattende eller komplekst innhold som krever langvarig interaksjon
  • Informasjon som brukeren må ha tilgang til kontinuerlig

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

Lukkeknappen i headeren kan skjules, men da må du ha en annen knapp som lukker modalen.

Headeren tilbys som en egen komponent for de tilfellene du trenger mer fleksiblitet enn header-propen gir deg. Begge varianter har mulighet for å skjule lukkeknappen.

Det er ikke støtte for å ha <form> som direkte barn av <Modal>. Legg <form> enten rundt hele modalen eller inni <Modal.Body>. Sistnevnte gjør det mulig å sette method="dialog", som gjør at modalen lukkes ved submit.

Husk at det er lett å klikke utenfor ved et uhell. Ikke bruk 'closeOnBackdropClick' hvis det kan føre til at brukeren mister data eller går glipp av viktig informasjon.

Bruk placement='top' hvis høyden kan endre seg (dynamisk innhold).

Modal på mobil

Under brekkpunktet sm (768px) fjernes margene på modalen slik at hele viewporten utnyttes.

Retningslinjer

Design

Modal er bygd opp i 3 deler: header, body og footer.

Illustrasjon av modalens tre deler

Header

Det er mulig å tilpasse innholdet i headeren. Du kan vise et ikon, optional label og lukk-knapp.

Body

Body er hovedinnholdet i modalen.

Footer

Kan inneholde en primær-, en sekundær- og en tertiærknapp. Primærknapp ligger helt til høyre i footeren. Ved bruk av to knapper brukes primær- og sekundærknapp. Hvis du trenger tre knapper plasseres tertiærknappen til venstre.

Bruk

  • Begrens bruk av modaler.
  • Ikke bruk mer enn tre knapper.
  • Sørg for at formålet er tydelig og at all nødvendig informasjon er tilgjengelig i modalen.
  • Ikke bruk modal når det kreves navigering mellom flere trinn.

Innhold

  • Tittelen bør alltid være med for å tydeliggjøre for brukeren at konteksten er endret. For skjermleserbrukere er dette ekstra viktig fordi de ikke vil se det som ligger utenfor modalen.
  • Hold innholdet kortfattet og fokusert. Bruk overskrifter, underoverskrifter og punktlister for å gjøre innholdet skannbart.

Lukke modal

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

Automatisk testing

Modalen har en kort animasjon når den åpnes, som du kanskje må ta høyde for i automatiske tester. Du kan f.eks. legge på en liten forsinkelse, eller aktivere "prefers-reduced-motion" hvis testmiljøet støtter dette.

Tilgjengelighet

Tilgjengelig navn

Hvis du bruker header-propen vil modalen automatisk få aria-labelledby knyttet opp mot header.heading. Hvis du ikke bruker header-propen må du huske å sette enten aria-label eller aria-labelledby selv. Se eksempel "Custom header".

Fokushåndtering

Fokus skal flyttes inn i modalen når den åpnes, og tilbake når den lukkes. Dette hånteres i de fleste tilfeller automatisk. Modalen bruker dialog-elementet, hvor standard oppførsel er at første fokuserbare element får fokus når modalen åpnes. Siden dette ofte vil være lukk-knappen, har vi valgt å sette autoFocus på dialog-elementet, slik at det elementet får fokus i stedet. I skrivende stund fungerer dette imidlertid bare i Firefox.

Når modalen lukkes, flyttes fokus tilbake der det var da modalen ble åpnet. Hvis dette elementet ikke finnes lenger, kan det være hensiktsmessig å manuelt sette fokus på det neste elementet. Fokus kan bare settes utenfor modalen etter at den er lukket. Hvis du lukker modalen ved hjelp av open-propen vil det gå en render-syklus før den lukkes. I så fall kan du for eksempel sette fokus i onClose.

Interaksjon med tastatur

Modalen kan som standard lukkes med Escape-tasten. Dette kan i noen tilfeller overstyres slik: onCancel={(e) => e.preventDefault()}. Se Props/JSDoc for mer info.

Tab-rekkefølge

Legg merke til at elementene i footer vises i motsatt rekkefølge. Dette er for at primærknappen skal komme til høyre og samtidig være først i tab-rekkefølgen.

Sideskroll

Når modalen åpnes, settes det en klasse på body-elementet med CSSen overflow: hidden for å hindre at resten av siden kan skrolles. For å unngå at innholdet flytter på seg når scrollbaren skjules/vises kan du bruke scrollbar-gutter: stable.

Figma

I Figma er komponenten designet med en slot-komponent som gjør det mulig å legge til eget innhold samtidig som variantene bevares.

Bytte ut innhold i Figma

Så enkelt er det:

  • Lag/sett sammen innholdet ditt i en autolayout frame som er responsiv i høyden.
  • Gjør autolayout framen med innholdet ditt om til en lokal komponent. Resizing må settes til horizontal fixed og vertical hug.
  • I Modal-komponenten skrur du på Body slot proppen.
  • Bruk 🔄 Body slot proppen for å endre innholdet til den lokale komponenten du lagde av innholdet ditt.

Det er mulig å detache Modal og legge til innhold direkte, men da vil du miste variantene.

Eksempel fra ExpansionCard.

Props

Modal

size?

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

header?

  • Type:
    { label?: string; icon?: ReactNode; heading: string; size?: "small" | "medium"; closeButton?: boolean | undefined; } | undefined
  • Description:

children

  • Type:
    ReactNode
  • Description:

open?

  • Type:
    boolean
  • Description:

onClose?

  • Type:
    ReactEventHandler<HTMLDialogElement>
  • Description:

onBeforeClose?

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

onCancel?

  • Type:
    ReactEventHandler<HTMLDialogElement>
  • Description:

closeOnBackdropClick?

  • Type:
    boolean
  • Default:
    false
  • Description:

width?

  • Type:
    number | "small" | "medium" | `${number}${string}`
  • Default:
    fit-content (up to 700px)

placement?

  • Type:
    "top" | "center"
  • Default:
    "center"
  • Description:

portal?

  • Type:
    boolean
  • Description:

className?

  • Type:
    string
  • Description:

aria-labelledby?

  • Type:
    string
  • Description:

aria-label?

  • Type:
    string
  • Description:

ref?

  • Type:
    LegacyRef<HTMLDialogElement>
  • Description:

Modal.Header

closeButton?

  • Type:
    boolean
  • Default:
    true
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

Modal.Body

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

Modal.Footer

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

Tokens

For å bruke --ac-modal-backdrop må du ha med pseudo-elementet ::backdrop til slutt i selektoren.

TokenFallback
--ac-modal-bg--a-surface-default
--ac-modal-backdrop--a-surface-backdrop
--ac-modal-width-small450px
--ac-modal-width-medium700px
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

© 2025 Nav

Arbeids- og velferdsetaten

Snarveier

  • Skriv for Aksel
  • Prinsipper for brukeropplevelse
  • Security Playbook
  • Etterlevelse

Om nettstedet

  • Hva er Aksel?
  • Personvernerklæring
  • Tilgjengelighetserklæring

Finn oss

  • Figma
  • Github
  • Slack