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
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 at noe det er viktig å vite om.
Error alert
Bruk Error alert til å informere brukere om noe kritisk har skjedd og krever umiddelbar oppmerksomhet.
Heading
Headingen blir en del av sidens overordnet headingsstruktur. Det betyr at du må velge et headingnivå 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 er ikke en ARIA live region og er ikke relatert til ARIA role="alert". Komponenten skal ikke motta dynamiske oppdateringer. Den blir presentert for skjermleserbrukere som vanlig statisk innhold.
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
Tokens
| Token | Fallback |
|---|---|
| --ac-alert-error-border | --a-border-danger |
| --ac-alert-error-bg | --a-surface-danger-subtle |
| --ac-alert-icon-error-color | --a-icon-danger |
| --ac-alert-warning-border | --a-border-warning |
| --ac-alert-warning-bg | --a-surface-warning-subtle |
| --ac-alert-icon-warning-color | --a-icon-warning |
| --ac-alert-info-border | --a-border-info |
| --ac-alert-info-bg | --a-surface-info-subtle |
| --ac-alert-icon-info-color | --a-icon-info |
| --ac-alert-success-border | --a-border-success |
| --ac-alert-success-bg | --a-surface-success-subtle |
| --ac-alert-icon-success-color | --a-icon-success |