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.
Live demo
Relaterte komponenter
Når du vil vise informasjon som ikke er kritisk eller tidsavhengig.
Når du vil vise detaljert innhold uten å ta brukeren ut av kontekst.
Når brukeren kan åpne og lukke innhold for å få mer informasjon.
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 |
Størrelse
Alert har to ulike størrelser:
| Størrelse | Bruk |
|---|---|
| Standard | Default |
| Kompakt | For korte, tettere meldinger (f.eks. inline i skjemaer) |
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
Unngå
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
Unngå
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.
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:
Hvordan oppfylle WCAG krav til statusbeskjeder forklart av UUtilsynet
Mer om bruk av aria-live i 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) |
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?
import @oslokommune/punkt-elements/dist/pkt-alert.js;import { PktAlert } from '@oslokommune/punkt-react';<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-alert.js" type="module"></script>Testing
Elements og React: 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");Dersom du bruker verktøyene i punkt-testing-utils så kan dette bli gjort automatisk for deg.
Props og tokens
| Prop | Type | Beskrivelse |
|---|---|---|
title | string | Tittelen som vises øverst i på meldingen |
skin | infosuccesswarningerror | Hvordan type melding er dette? |
date | string | Dato som vises nederst i på meldingen |
ariaLive | offpoliteassertive | Hvordan skal skjermleseren lese opp meldingen? |
compact | boolean | Gjør meldingen mindre |
closeAlert | boolean | Viser 'Lukk'-knappen |
| Slot (children) | Beskrivelse |
|---|---|
default | Innholdet i meldingen |
| Event | Beskrivelse |
|---|---|
onClose | React: Klikk-event for 'Lukk'-knappen |
close | Vue: Klikk-event for 'Lukk'-knappen |
Farger
| Element | CSS Variabel |
|---|---|
| Background | |
| Border | |
| Text | |