Modal

Modal brukes for å vise viktig informasjon eller samle input fra brukeren uten å forlate siden. Den krever en bevisst handling for å åpnes og bør aldri dukke opp uoppfordret.

() => {
  const [isOpen, setOpen] = React.useState(false);
  return (
    <>
      <Modal
        open={isOpen}
        onDismiss={() => setOpen(false)}
        title="Her er en modal"
        size="medium"
      >
        <Paragraph>
          Modaler må kun vises etter en brukerinteraksjon.
        </Paragraph>
        <PrimaryButton onClick={() => setOpen(false)}>Lukk</PrimaryButton>
      </Modal>
      <PrimaryButton onClick={() => setOpen(true)} type="button">
        Vis en modal
      </PrimaryButton>
    </>
  );
}

Det finnes to hovedtyper modaler:

• Informasjonsmodaler — viser informasjon brukeren må bekrefte, for eksempel advarsler eller bekreftelser
• Funksjonsmodaler — inneholder skjemaer eller handlinger som krever brukerens input, for eksempel innlogging eller innstillinger

Modal finnes i tre størrelser: small, medium og large. Velg størrelse basert på innholdsmengden. Se Utvikling-fanen for implementering.

• small — kompakt innhold som bekreftelser
• medium — standard, passer de fleste bruksområder
• large — mye innhold eller komplekse skjemaer

Trenger du et panel som glir inn fra siden uten å blokkere resten av innholdet, bruk Drawer i stedet.

Modal bruker det native <dialog>-elementet, som håndterer fokusstyring og skjermleserstøtte automatisk. Fokus flyttes inn i modalen ved åpning og tilbake til utløseren ved lukking. Modalen lukkes med Escape-tasten.