Hopp til innhold

AlertMessage

En varselmelding er en beskjed til brukeren som vises i en global sammenheng. Det kan være et varsel om at noe er feil, global informasjon eller lignende.

Hei, jeg er en varslingsmelding av typen Info med en navlink

Innholdet i en varselmelding bør ikke bryte over flere linjer på desktop. På mobil kan det vises over flere linjer så lenge varselet ikke skjuler viktig innhold under.

Dersom meldingen ikke er koblet til en tilstand på siden (for eksempel en feil i et skjema) kan man la brukeren lukke den. For global informasjon som driftsmeldinger bør man huske valget om å lukke meldingen, så brukeren slipper å se den på nytt.

Varianter

Vi har fire ulike varsler, med fargene blå, rød, gul og grønn. Fargene i varselmeldinger har en betydning på samme måte som MessageBox:

  • Blått er for generell informasjon til brukeren.
  • Gult gir brukeren en advarsel, for eksempel at en funksjonalitet er i beta og derfor er ustabil.
  • Rødt gir brukeren en feilmelding, for eksempel om det oppstår en systemfeil eller brukeren avbryter en handling.
  • Grønt betyr at en handling var vellykket.

Tilgjengelighet

Når vi bruker meldinger med farge, må vi alltid huske å ha en god og beskrivende tekst, siden farge ikke er et godt nok kjennetegn for alle brukere. Skriv en presis meldingstekst, der du sier det viktigste først.

Når bruker vi en AlertMessage?

Før bruker en AlertMessage er det greit å ha tatt stilling til noen spørsmål:

  • Er innholdet i beskjeden tydelig nok til å stå på egenhånd, uten tilknytning til noe annet på siden?
  • Får innholdet plass på én linje på desktop?

Varsler skal vises plassert øverst på siden og ta opp hele sidebredden. Bruk MessageBox om du skal vise en beskjed i en annen kontekst.

Riktig

En varselmelding plassert øverst på siden

Feil

I en annen kontekst brukes meldingsboks, ikke varselmelding

Eksempler på bruk

React API

Her finner du en oversikt over props på komponentene i pakken.