Intro
Alert er en komponent som varsler brukeren om noe viktig. Komponenten har i flere varianter du kan bruke for å tilpasse den til budskapet i varselet.
Egnet til:
- Kort informativ varselsmelding
Uegnet til:
- System notification eller lignende
Eksempler
Bekrefter at en oppgave er fullført som forventet.
Skal formidle ren informasjon
Bruk denne når du vil at brukeren skal foreta en bestemt handling eller for å advare dem om noe viktig.
Brukes til å informere brukere om at noe kritisk har skjedd og vil kreve umiddelbar oppmerksomhet.
Husk riktig h-tag ved bruk av heading i Alert
Bruk inline om varselet er en del av annet innhold eller når panelet og bakgrunnsfarge blir støy for brukeren.
Varianter
Information alert
Varsler som formidler ren informasjon
Success alert
Bekrefter at en oppgave er fullført som forventet.
Warning alert
Bruk denne når du vil at brukeren skal foreta en bestemt handling eller for å advare dem om noe viktig.
Error alert
Bruk Error alert til å informere brukere om noe kritisk har skjedd som krever umiddelbar oppmerksomhet.
Heading
Headingen blir en del av sidens overordnet headingsstruktur. Det betyr at du må velge et heading-nivå basert på Alert'ens plass i sidens innholdsstruktur.
Inline
Bruk inline om varselet er en del av annet innhold eller når panelet og bakgrunnsfarge blir støy for brukeren.
Retningslinjer
Ikke lag andre versjoner
Det er viktig at Alerts har samme utseende og formspråk på tvers av produktene, så den skal ikke justeres.
Lenker
Lenker i komponenten er svart med underline for å ivareta fargekontrast.
Innhold
Det er ikke alle som har en intuitiv forståelse av betydningen av ikonene og fargene, derfor er det viktig at ordene du velger gjør det åpenbart for brukerne hvordan de skal forholde seg til informasjonen i varselet. Særlig for feilmeldinger er det viktig at du forteller om det er noe de må eller kan gjøre for å komme videre med oppgaven sin.
Semantisk struktur
Alert har ikke noe semantisk struktur som skiller den fra vanlig tekst. Hvis du bruker varianten med heading, sørg for at du setter headingnivået basert på Alert'ens plass i innholdsstrukturen.
Tilgjengelighet
Alternativtekst
Ikonene er ikke bare dekorative. De har default alternativtekst som kommuniserer alvorlighetsgrad: "Informasjon", "Suksess", "Advarsel" og "Feil". Denne blir lest opp som en del av innholdet for skjermleserbrukere.
Interaksjon med skjermleser
Alert-komponenten blir i utgangspunktet presentert som vanlig statisk innhold for skjermleserbrukere. Hvis du skal bruke Alert-variant="error" så er det sannsynlig at beskjeden krever brukerens umiddelbare oppmerksomhet eller handlinger. Da kan du legge til role="alert". Innholdet i komponenten vil bli lest opp umiddelbart.
Hvis du bruker variant="warning" eller variant="success", kan du vurdere å bruke role="status". Med denne skal skjermlesere gjøre seg ferdig med det de leser før innholdet i Alert leses opp.
Ved bruk av varianten "info" skal det aldri være et behov for role="alert" eller role="status".
Props
Alert
- children ReactNode
- Alert content
- variant "error" | "warning" | "info" | "success"
- Changes colors and icon usage when changed
- size?"medium" | "small"
- Changes padding and font-sizes
- fullWidth?boolean
- Removes border-radius
- inline?boolean
- Removes background from Alert
- closeButton?boolean
- Removes close-button(X) when false Requires onClose to be set
- onClose? (() => void)
- Callback for alert wanting to close requires closeButton to be true
- className? string
- ref? Ref<HTMLDivElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Alert extends HTMLDivElement