I designsystemet finnes det 3 forskjellige meldingskomponenter, og hvilken som skal brukes kommer an på hva slags type informasjon du ønsker å gi brukeren. Felles for alle er at de bør holdes korte og konsise, og inneholde relevante tips eller informasjon som brukeren trenger å vite. Eksempler på situasjoner der meldinger kan brukes er når systemet er nede, betaling er gjennomført eller at det kommer en eller flere endringer på en tjeneste.
Målet med meldinger er å bekrefte og skape trygghet hos brukerne, slik at de opplever at de har kontroll over situasjonen.
Noen prinsipper vi bør følge:
<a>) som peker mot skjemafeltet som må fylles ut på nyttrole="alert"Alle meldingskomponentene kommer i 4 farge-varianter.
Hvilken av disse du skal bruke, avhenger av hva slags informasjon du prøver å formidle. Er det ren informasjon, som brukeren bør få med seg, er info-varianten god å bruke.
Tips kan brukes når du vil tipse brukeren om alternativer, eller andre valg. Dette kan også være informasjon som brukere ikke må forholde seg til. F.eks. tips til andre tjenester, forenkling av prosesser etc.
Info brukes der du vil informere om noe som ikke er kritisk. Det kan for eksempel være planlagt vedlikehold, endring av tjenester eller ønske om at brukerne bekrefter kontaktinformasjon.
Suksess-varianten brukes til å formidle «gode nyheter», eller når ønsket respons på en handling skjer. Det kan f.eks. være om en tjeneste blir tilgjengelig igjen, eller om betalingen ble gjennomført.
Error-varianten brukes bare i sammenhenger der det har skjedd en feil, eller hvis det er en pågående feil. Det kan f.eks. være at en tjeneste er nede akkurat nå, eller at en betaling ikke gikk igjennom.
Vær oppmerksom på at alle feilmeldinger automatisk får role="alert". Det gjør at en skjermleser automatisk vil lese opp innholdet i meldingen med en gang den vises. Hvis meldingen er tilstede ved initiell sidelasting leses den opp like etter sidetittel. Dette kan slås av, se eksempelet under:
Meldingsboksene skal inneholde informasjon som er nyttig og relevant for brukerne. De skal holdes konsise og ikke brukes til å forklare ting «man ikke finner noe annet sted til».
Bruk meldingsbokser:
Systemmeldinger skal bare brukes til viktige, midlertidige meldinger. De plasseres direkte under headeren og det skal helst bare brukes 1 per side.
Bruk systemmelding:
Ikke bruk systemmelding:
Kontekstuelle meldinger er informasjon som skal gis i en kontekst. Dette er meldinger som skal utheves, men som bare gir mening i konteksten den er plassert. I motsetning til systemmeldinger, kan disse meldingene plasseres midt i innholdet på siden.
Bruk kontekstuelle meldinger:
Ikke bruk kontekstuelle meldinger:
Alle variantene som kompakt finnes i alle fargevariantene.
Kompakt versjon med mindre padding:Med tittel:Kan lukkesI tilfeller der meldingsboksene ikke får god nok kontrast mot valgt bakgrunnsfarge, finnes det en alternativ versjon. Den alternative versjonen gir meldingsboksen hvit bakgrunn i light-mode, men beholder standard farge i darkmode. Du skrur på denne versjonen ved å bruke onColoredBg-propertyen i hvilken som helst av meldingskomponentene.