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
Eksempler
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.
Retningslinjer
Design
Modal er bygd opp i 3 deler: header, body og footer.
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.
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`.
- closeOnBackdropClick?boolean
- Whether to close when clicking on the backdrop. **WARNING:** Users may click outside by accident. Don't use if closing can cause data loss, or the modal contains important info.
- 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.
| Token | Fallback |
|---|---|
| --ac-modal-bg | --a-surface-default |
| --ac-modal-backdrop | --a-surface-backdrop |
| --ac-modal-width-small | 450px |
| --ac-modal-width-medium | 700px |