GithubYarn FigmaEndringslogg
Intro
Modaler er nyttige verktøy når du har kritisk informasjon en bruker må ta stilling til.
Egnet til å:
- Få brukeren til å fokusere på en spesifikk oppgave
- Gjøre bruker oppmerksom på en systemkritisk feil
Har du innspill til komponenten?
Send forslagEksempler
Retningslinjer
Husk å enten bruke aria-label eller aria-labelledby. Om det er brukt en beskrivende tittel i Modalen så er aria-labelledby et godt valg for å tilgjengeliggjøre den for skjermlesere.
Sikre skjermlesere
Husk å sette hvilken element modal skal mountes på. Dette må gjøres for å sikre at skjermlesere ikke leser opp innholdet bak modal når den er åpen.
Props
Modal
- children ReactNode
- Modal content
- open boolean
- Open state for modal
- onClose () => void
- Callback for modal wanting to close
- shouldCloseOnOverlayClick?boolean
- If modal should close on overlay click (click outside Modal)
- className? string
- User defined classname for modal
- overlayClassName? string
- User defined classname for modal
- closeButton?boolean
- Removes close-button(X) when false
- shouldCloseOnEsc? boolean
- style? Styles
- Allows custom styling of ReactModal, in accordance with their typing
- parentSelector? (() => HTMLElement)
- Callback for setting parent element modal will attach to
- aria-labelledby? string
- aria-describedby? string
- aria-modal? boolean
- aria-label? string
- Sets aria-label on modal @warning This should be set if not using 'aria-labelledby' or 'aria-describedby'
- ref? Ref<ReactModal>
- Modal extends ReactModal
Modal.Content
- children ReactNode
- Modal.Content content
- className? string
- ref? Ref<HTMLDivElement>
- Modal.Content extends HTMLDivElement
Tokens
| Token | Fallback |
| --ac-modal-bg | --a-surface-default |
| --ac-modal-backdrop | --a-surface-backdrop |