Alert
Intro
Alert tiltrekker brukerens oppmerksomhet til viktige opplysninger og varsler. Komponenten har flere varianter du kan bruke for å tilpasse den til budskapet i varselet.
Eksempler
Husk riktig h-tag ved bruk av heading i Alert.
'fullWidth' fjerner 'border-radius' slik at alerten blir bedre egnet for å vises i full bredde på toppen av en ramme, som et banner.
Bruk inline om varselet er en del av annet innhold eller når panelet og bakgrunnsfarge blir støy for brukeren.
Bruk 'role' dersom alerten vises dynamisk.
Retningslinjer
Antall per side
Hvis du har flere alerts på samme side vil de stjele oppmersomhet fra hverandre. Tenk spesielt over bruken av info-varianten. Den skal ikke brukes som et dekorativt panel.
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 skal være svart med underline for å ivareta fargekontrast. Dette skjer automatisk hvis du bruker Link-komponenten.
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.
Knapper
Hvis du legger til egne knapper i alerten, bruk kun secondary-neutral. Ikke bruk knapper i inline-varianten.
Tilgjengelighet
Alternativtekst
Ikonene har default alternativtekst som kommuniserer alvorlighetsgrad: "Informasjon", "Suksess", "Advarsel" og "Feil". Den alternative teksten blir presentert som en del av innholdet for skjermleserbrukere.
Interaksjon med skjermleser
Alert-komponenten presenteres som vanlig statisk innhold for skjermleserbrukere. Benyttes variant="error" er det sannsynlig at beskjeden krever brukerens umiddelbare oppmerksomhet eller handlinger. Da kan du legge til role="alert" som gjør at innholdet i komponenten leses opp umiddelbart.
Hvis du bruker variant="warning" eller variant="success", kan du vurdere å bruke role="status". Da skal skjermlesere gjøre seg ferdig med det som leses før innholdet i Alert leses opp.
Ved bruk av varianten "info" trengs ikke role="alert" eller role="status".
Props
Alert
children
- Type:
ReactNode - Description:
variant
- Type:
"error" | "warning" | "info" | "success" - Description:
size?
- Type:
"medium" | "small" - Default:medium
- Description:
fullWidth?
- Type:
boolean - Default:false
- Description:
contentMaxWidth?
- Type:
boolean - Default:true
- Description:
inline?
- Type:
boolean - Default:false
- Description:
closeButton?
- Type:
boolean - Default:false
- Description:
onClose?
- Type:
(() => void) - Description:
data-color?
- Type:
undefined - Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement> - Description: