Alert

Release dato: 13.03.2023

Sist oppdatert: 07.07.2025

Alert (varsel, statusbeskjed) gir en beskjed til brukeren – for eksempel for Ă„ informere om en viktig hendelse, bekrefte en handling eller varsle om en feil.

FormÄlet med en alert er Ä hjelpe brukeren med Ä forstÄ hva som har skjedd og eventuelt hva de bÞr gjÞre videre.

Test komponenten

Relaterte komponenter

Varianter

Statuser

Alert har fire ulike statuser med tilhĂžrende farge og ikon:

Type Bruk
Info (blÄ) Gir tilleggsinformasjon som ikke krever umiddelbar handling
Success (grĂžnn) Bekrefter at en handling har vĂŠrt vellykket
Warning (gul) Advarer brukeren om systemfeil og konsekvenser av valg
Error (rĂžd) Gir brukeren beskjed om at noe er feil. Hvis mulig, si noe om hvordan hen kan lĂžse oppgaven sin
Alle fargevarianter av alert

StĂžrrelser

Alert har tre ulike stĂžrrelser:

StĂžrrelse Bruk
Medium (default) Standard, og skal brukes som hovedregel
Small For korte, tettere meldinger (f.eks. inline i skjemaer)
XSmall For korte, tettere meldinger (f.eks. inline i kompakte skjemalĂžsninger)
To varianter av alert, default og compact

BruksomrÄder

Alert har tre ulike bruksomrÄder:

BruksomrÄde Plassering
Inline alert Brukes tett pÄ innhold (f.eks. under felt)
Banner alert Plassert over innhold, med tittel og dato
Toast alert Kort status som vises midlertidig (f.eks. autolagring)

Retningslinjer for bruk

Bruk alert nÄr

  • du vil informere brukeren om en viktig status, endring eller feil
  • du vil bekrefte at en handling har blitt utfĂžrt, for eksempel at noe har blitt sendt inn, lagret, eller slettet

UnngÄ alert nÄr

  • informasjonen ikke er kritisk for brukerens oppgave
  • det bare handler om visuell gruppering – bruk messagebox i stedet
  • det allerede finnes for mange alerts

Alerten skal vÊre lett Ä forstÄ

Bruk et ikon som matcher alvorlighetsgraden og budskapet.

Alerten bÞr formidle budskapet raskt og effektivt, sÊrlig nÄr du bruker inline alert. Ved bruk av banner alert, kan du vurdere Ä legge til en tittel hvis meldingen trenger en oppsummering.

Hvis alerten ikke er knyttet til en bestemt handling, bĂžr brukeren kunne lukke den manuelt. Dette gir brukeren kontroll og reduserer visuell stĂžy.

GjĂžr slik

Skriv klare og direkte meldinger

UnngÄ

UnngÄ lange avsnitt eller unÞdvendig detaljert informasjon

Vis Ă©n alert om gangen

For mange alerts kan overvelde og forvirre. Vis Ă©n alert om gangen hvis mulig, og sĂžrg for at den viktigste meldingen vises Ăžverst.

GjĂžr slik

Skriv tydelig og klart, i kun Ă©n alert

UnngÄ

UnngÄ Ä dele opp flere statuser i flere ulike alerts

Plasser alerten i nĂŠrheten av innholdet

Plasser alerten sÄ nÊrt det innholdet eller feltet den handler om som mulig. Det gjÞr det enklere Ä forstÄ konteksten.

Hvis alerten er en feilmelding, skal brukeren alltid fÄ vite hva hen kan gjÞre for Ä fikse feilen. Du finner tips om hvordan skrive gode feilmeldinger i artikkelen om beste praksis for skjemadesign.

Responsivitet

Alert-komponenten tilpasser seg automatisk tilgjengelig plass og bryter linjer der det er nÞdvendig. Dette gjelder bÄde inline alerts, banner alerts og toast alerts.

Det er likevel viktig Ă„ teste hvordan alerten fungerer i din lĂžsning, da kontekst og plassering har betydning for opplevelsen:

  • Toast alerts bĂžr testes pĂ„ mobil (bĂ„de i stĂ„ende og liggende visning) for Ă„ sikre at meldingen er tydelig og ikke blir oversett.
  • Plassering pĂ„virker tilgjengelighet og synlighet. PĂ„ smĂ„ skjermer kan det vĂŠre nĂždvendig Ă„ justere marginer, padding eller z-index for Ă„ unngĂ„ at alerten dekker viktig innhold.
  • Lange meldinger bĂžr vurderes nĂžye. Selv om komponenten bryter linjer, kan for mye tekst gjĂžre det vanskelig Ă„ oppfatte innholdet raskt.

Kort oppsummert: Alerten hÄndterer layout og linjebryting automatisk, men du mÄ selv sikre god plassering, visuell prioritering og tydelighet i den konteksten alerten brukes.

Alert pÄ mobil

Universell utforming

Innhold mÄ gi mening med skjermleser

Alert mÄ kunne oppfattes av alle brukere, uavhengig av hvordan de navigerer eller hvilke hjelpemidler de bruker. Du mÄ sÞrge for at innholdet kan leses med skjermleser og vÊre tilgjengelig med kun tastatur.

Det er viktig at budskapet i alerten ikke kun blir formidlet visuelt – bĂ„de tekst og ikon mĂ„ bidra til Ă„ forklare innholdet.

SĂžrg for at meldingen kan oppfattes i tide

Ved bruk av toast alerts som forsvinner automatisk mÄ du vÊre sikker pÄ at alle brukere fÄr med seg meldingen, ogsÄ de med skjermleser. Er du er i tvil, anbefaler vi Ä la meldingen bli vÊrende med mulighet for Ä lukke den manuelt.

Lukkeknappen mÄ vÊre tilgjengelig med tastatur

Alerts som kan lukkes mÄ ha en tydelig og tilgjengelig lukkeknapp som kan fokuseres og aktiveres med tastatur.

Test komponenten pÄ ulike skjermstÞrrelser

Du mÄ sÞrge for Ä teste at komponenten fungerer som den skal pÄ ulike skjermer. Vi anbefaler ogsÄ at du tester pÄ ulike zoom-nivÄ.

Mer om universell utforming av alerts:

Anatomi

Element Beskrivelse
1. Ikon Angir type alert (valgfritt)
2. Tittel (valgfritt) Beskrivende overskrift (valgfritt)
3. Melding Hovedinnhold
4. Dato (valgfritt) Dato eller tidsperiode (valgfritt)
5. Lukkeknapp (valgfritt) Lukker alert permanent (valgfritt)
Elementene i anatomien til alert.

Implementasjon i kode

Om options

Alert kan enten ta en JSON-liste som attributt/prop i options, eller en rekke <option>-elementer. Dersom du forventer at options vil endre seg dynamisk, eller ta i bruk tagSkinColor, description eller prefix, anbefaler vi at du bruker JSON-liste. Uansett vil options alltid bli konvertert til en array av objekter i komponenten.

Hvordan ta komponenten i bruk?

Testing

Elements: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig fĂžr du tester den. Dette kan gjĂžres ved Ă„ kjĂžre denne kodelinjen fĂžr testene kjĂžres: 

await window.customElements.whenDefined("pkt-alert");

Egenskaper

PktAlert

Props

Prop:
title?
Type:
string
Beskrivelse:
Tittelen som vises Þverst i pÄ meldingen
Prop:
skin?
Type:
"info" | "success" | "warning" | "error"
Standardverdi:
"info"
Beskrivelse:
Hvordan type melding er dette?
Prop:
date?
Type:
string
Beskrivelse:
Dato som vises nederst i pÄ meldingen
Prop:
ariaLive?
Type:
"off" | "polite" | "assertive"
Standardverdi:
"polite"
Beskrivelse:
Hvordan skal skjermleseren lese opp meldingen?
Prop:
size?
Type:
"medium" | "small" | "xsmall"
Standardverdi:
"medium"
Beskrivelse:
Endrer stÞrrelsen pÄ ulike elementer i alerten.
Prop:
closeAlert?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Viser 'Lukk'-knappen

Slots

Slot:
default
Beskrivelse:
Innholdet i meldingen

Events

Event:
onClose
Type:
—
Beskrivelse:
React: Klikk-event for 'Lukk'-knappen
Event:
close
Type:
—
Beskrivelse:
Vue: Klikk-event for 'Lukk'-knappen