Intro
Alert er en varslingskomponent som skaper fokus rundt en responsmelding uten nødvendigvis å avbryte brukerens oppgaveflyt.
Egnet til å:
- Kort informativ varselsmelding.
Vurder noe annet:
- Erstatter feks. ikke system notification eller lignende.
- Informasjon som ikke passer innenfor varselkonseptet.
- Innhold som oppdateres etter siden lastes inn.
Har du innspill til komponenten?
Send forslagEksempler
Størrelse
Alert finnes i medium og small, sistnevnte er laget for interne flater (feks saksbehandlingssystemer) som har kompakte brukergrensesnitt og tidvis redusert høydeplass.
Information alert
Brukes som navnet angir til rene informasjonsmeldinger. Den blå fargen og informasjonsikonet gir et udramatisk inntrykk.
Success alert
Opptrer for eksempel i sammenheng med en vellykket brukerhandling.
Warning alert
Advarselen kan spesifisere hva som eventuelt hindrer fremdrift eller skaper problemer. Denne varianten kan ha flere roller avhengig av interaksjonskontekst men hovedformålet er å formidle at status ikke er optimal.
Error alert
Dette varselet gir informasjon om at noe er feil. Hvis mulig kan meldingen også angi løsningsforslag.
Heading
Denne varianten har en innledende 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 / plain
Uten farget bakgrunnsfelt eller ramme blir varselet mindre fremtredende og det er kun ikonet som definerer varseltypen rent grafisk.
Tilgjengelighet
Alternativ-tekst
Ikonene er ikke bare dekorative. De har default alternativ-tekst som kommuniserer alvorlighetsgrad: "Informasjon", "Suksess", "Advarsel" og "Feil". Denne blir lest opp som en del av innholdet for skjermleserbrukere.
Interaksjon 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.
Design
Ikke lag andre versjoner
Regelen for kontinuitet og forutsigbarhet gjelder som alltid, det skal derfor ikke lages andre versjoner av alert komponentet enn de som eksisterer i designsystemet. Eksempelet viser fjernet ramme.
Velg rett variant
Hvis du ønsker å bruke alert uten ramme så velg inline/plain varianten.
Fargekontrast
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.
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
- className? string
- ref? Ref<HTMLDivElement>
- Alert extends HTMLDivElement
Tokens
| Token | Fallback |
| --ac-alert-error-border | --a-border-danger |
| --ac-alert-error-bg | --a-surface-danger-subtle |
| --ac-alert-warning-border | --a-border-warning |
| --ac-alert-warning-bg | --a-surface-warning-subtle |
| --ac-alert-info-border | --a-border-info |
| --ac-alert-info-bg | --a-surface-info-subtle |
| --ac-alert-success-border | --a-border-success |
| --ac-alert-success-bg | --a-surface-success-subtle |