Modal

Om komponenten

Modaler er en type dialog fordi det er en samtale mellom brukeren og obos.no. Bruk en modal for å presentere viktig informasjon eller be om brukerens input som er nødvendig for å fullføre en hovedoppgave. Modaler avbryter en brukerflyt for korte og ikke-hyppige oppgaver, for eksempel redigerings- eller administrasjonsoppgaver. Når modalen er åpen, blokkeres brukeren fra innholdet på siden og kan ikke gå tilbake til sin forrige arbeidsflyt før modaloppgaven er fullført eller brukeren lukker modalen. Selv om de er effektive når de brukes riktig, bør modaler brukes sparsomt for å begrense forstyrrelse hos brukeren. Derfor, hvis en bruker må utføre en oppgave gjentatte ganger, bør du vurdere å gjøre det mulig å endre på siden uten bruk av en modal.

Egnet til:

• For å varsle brukeren om relevant informasjon knyttet til hovedoppgaven. Modaler brukes ofte til å formidle en konsekvens av en brukers handling.
• For å bekrefte en brukers avgjørelse. Beskriv tydelig handlingen som bekreftes og forklar eventuelle konsekvenser den kan forårsake. Både tittelen og knappen skal gjenspeile handlingen som vil skje. Hvertfall hvit handlingen er destruktiv eller irreversibel.

Uegnet til:

• Om det er varsel på repetative oppgaver, så skal det løses på siden uten bruk av en modal.
• Det skal ikke plasseres et helt skjema i en modal. Ett skjemaelement er greit.

Relaterte komponenter

• Button

Varianter

En modal skal alltid ha en tittel, denne defineres ved å sette slot="title" på øverste headingen i modalen.

<UNSAFE_DialogTrigger>
  <Button>Åpne</Button>
  <UNSAFE_Modal>
    <UNSAFE_Dialog>
      <Heading slot="title" level={2}>
        Hvitevarer
      </Heading>
      <p>
        Denne boligen har tilvalg om hvitevarer fra HTH. Mulighet for
        vaskemaskin, tørketrommel, oppvaskmaskin eller å avstå dette
        tilbudet.
      </p>
    </UNSAFE_Dialog>
  </UNSAFE_Modal>
</UNSAFE_DialogTrigger>

Modal kan rendres med en eller flere knapper som gjør at modalen lukker seg. For å få denne oppførseln må man sette slot="close" på knappen

<UNSAFE_DialogTrigger>
  <Button>Åpne</Button>
  <UNSAFE_Modal>
    <UNSAFE_Dialog>
      <Heading slot="title" level={2}>
        Hvitevarer
      </Heading>
      <p>
        Denne boligen har tilvalg om hvitevarer fra HTH. Mulighet for
        vaskemaskin, tørketrommel, oppvaskmaskin eller å avstå dette
        tilbudet.
      </p>
      <Footer>
        <Button onPress={() => console.log('SAVED!')} slot="close">
          Lagre
        </Button>
        <Button variant="tertiary" slot="close">
          Avbryt
        </Button>
      </Footer>
    </UNSAFE_Dialog>
  </UNSAFE_Modal>
</UNSAFE_DialogTrigger>