Egnet til:

• å fange brukerens oppmerksomhet ved å gi korte viktige meldinger de bør ta hensyn til, for eksempel vise en overordnet systemfeil  eller feil ved innlastning. 
• meldinger som gjelder hele siden eller gruppe/seksjon på siden.
• å vise en systemfeil der deler av tjenesten eller enkeltdata er utilgjengelig.

Uegnet til:

• å gjøre brukeren oppmerksom på feil i enkeltfelt. Da skal du bruke ErrorMessage i stedet.
• statiske varsler (infobokser) på siden. Bruk da Panel i stedet.

Teknisk dokumentasjon

Se Alert i Storybook for tekniske detaljer. 

Varianter

Vi har fire varianter; suksess, nøytral, advarsel og fare. Alle variantene har et standard-ikon og mulighet for lukkekryss. Fargene er forhåndsdefinert per variant, og kan ikke endres. Fargene i Alert reflekterer tilnærmet samme betydning som fargene i Panel.

Suksess

Brukes til å bekrefte en vellykket operasjon. Fargen er grønn. 

Nøytral

Viser en melding som kan være til nytte for brukeren. Fargen er gul. Denne varianten brukes ofte til systemvarsler hvor deler av tjenesten er utilgjengelig.

Advarsel

Meldingen skal gi brukeren beskjed om hva som har skjedd, og hva brukeren bør gjøre. Fargen er rød. Denne varianten brukes ofte til kritiske systemvarsler.

Fare

Denne brukes for eksempel når brukeren kan miste opplysninger, eller for å varsle strengt fortrolig informasjon. Fargen er rød med uthevet rød kantlinje.

Hvordan bruke komponenten

Farger og ikon for viktighet

Bruk fargekodene med ikoner for aktivt for å understreke graden av alvorlighet i varselet. Skill særlig mellom feil som brukeren kan rette opp der og da, og større feil som for eksempel feil ved innlasting. Se flere eksempler:

På farget bakgrunn

Bruk innstillingen backgroundBrightness hvis du bruker komponenten på en farget bakgrunn for økt kontrast.

Eksempel: Alert på bakgrunn

 

Universell utforming  

• Innholdet bør være kort og presist.
• Pass på tilstrekkelig kontrast (minst 4,5:1) mellom tekst og bakgrunn. 
• Husk å bruke riktig type av Alert til riktig type melding og teksten bør gjenspeile alvorlighetsgraden.
• Når du skal vise eller skjule komponenten må du bruke den innebyggede egenskapen (showAlert) – i stedet for å lage egne regler rundt komponenten. Dette gjør det lettere for skjermleser å fange opp endringen.
• Bruk bare aria-live="off" i unntakstilfeller. Hvis denne er satt vil skjermleser ikke lese opp meldingen.