Modal

() => {
  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, og skal ikke
          avbryte brukeren på noe vis.
        </Paragraph>
        <PrimaryButton onClick={() => setOpen(false)}>Lukk</PrimaryButton>
      </Modal>
      <PrimaryButton onClick={() => setOpen(true)} type="button">
        Vis en modal
      </PrimaryButton>
    </>
  );
}

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.

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

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

Eksempler

() => {
  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>
    </>
  );
}

Bruk Modal når

Unngå Modal når

Eksempler