Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

Modal

Oppdatert 23. august 2023
GithubYarn FigmaEndringslogg

    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

    Intro

    En modal er et midlertidig vindu eller lag 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
    • Viktig informasjon som brukeren må ha tilgang til kontinuerlig
    Informasjon

    Breaking-changes

    Modal er oppdatert i v5 og inneholder breaking-changes. Du finner alle endringene i migreringsguiden vår.

    Eksempler

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

    Retningslinjer

    Design

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

    Illustrasjon av modalens tre deler

    Header

    Komponenten kommer med mulighet til å 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 modalens formål er tydelig og relevant for brukerens nåværende kontekst
    • Ikke overveld brukere med unødvendig informasjon eller handlinger
    • Ikke bruk modal når det kreves navigering mellom flere trinn
    • Unngå handlinger som krever ytterligere informasjonskilder som ikke er tilgjengelig i modalen.


    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 under modalen.
    • Hold innholdet kortfattet og fokusert. Unngå å overvelde brukere med for mye informasjon. Bruk overskrifter, underoverskrifter og punktlister for å gjøre innholdet skannbart.

    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 content i Figma

    Eksempel fra ExpansionCard

    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.


    Lukke modal

    Sørg for at det alltid er en synlig og enkel måte å lukke modalen på. Det vanligste er å ha en lukkeknapp ø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.

    Modal på mobil

    Under brekkpunktet 768px fjernes margene på modalen slik at hele viewporten kan utnyttes.

    Plassering av modal

    Modalen plasseres alltid sentrert horisontalt og vertikalt i viewporten. Modalen legger seg alltid over annet innhold på nettsiden.

    Automatisk testing

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

    Tilgjengelighet

    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. Om det er brukt en beskrivende tittel i modalen så er `aria-labelledby` et godt valg for å tilgjengeliggjøre den for skjermlesere.

    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.

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

    Interaksjon med tastatur

    Modalen kan som standard lukkes med Escape-tasten. Dette kan eventuelt overstyres slik: `onCancel={(e) => e.preventDefault()`

    Props

    Modal

    header? { label?: string; icon?: ReactNode; heading: string; size?: "medium" | "small"; closeButton?: boolean | undefined; } | undefined
    Content for the header. Alteratively you can use <Modal.Header> instead for more control, but then you have to set `aria-label` or `aria-labelledby` on the modal manually.
    children ReactNode
    Modal content
    open? boolean
    Whether the modal should be visible or not. Remember to use the `onClose` callback to keep your local state in sync. You can also use `ref.current.openModal()` and `ref.current.close()`.
    onClose? ReactEventHandler<HTMLDialogElement>
    Called when the modal has been closed
    onBeforeClose? (() => boolean | void)
    Called when the user wants to close the modal (clicked the close button or pressed Esc). @returns Whether to close the modal
    onCancel? ReactEventHandler<HTMLDialogElement>
    Called when the user presses the Esc key, unless `onBeforeClose()` returns `false`.
    width?number | "medium" | "small" | `${number}${string}`
    portal? boolean
    Lets you render the modal into a different part of the DOM. Will use `rootElement` from `Provider` if defined, otherwise `document.body`.
    className? string
    User defined classname for modal
    aria-labelledby? string
    Sets aria-labelledby on modal. No need to set this manually if the `header` prop is used. A reference to `header.heading` will be created automatically. @warning If not using `header`, you should set either `aria-labelledby` or `aria-label`.
    ref? Ref<HTMLDialogElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    Modal extends HTMLDialogElement

    Modal.Header

    closeButton?boolean
    Removes close-button (X) when false
    className? string
    ref? Ref<HTMLDivElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    Modal.Header extends HTMLDivElement

    Modal.Body

    className? string
    ref? Ref<HTMLDivElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    Modal.Body extends HTMLDivElement

    Modal.Footer

    className? string
    ref? Ref<HTMLDivElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    Modal.Footer extends HTMLDivElement

    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.

    © 2023 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