Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

Alert

Oppdatert 25. august 2023Stabil
GithubYarn FigmaEndringslogg

    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

    Har du innspill til komponenten?

    Send forslag

    Eksempler

    Åpne eksempel i nytt vindu

    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.

    GjørAlert med riktig design
    Alert brukes på tvers av produkter og skal se like ut
    UnngåAlert med endret design
    Ikke fjern border eller gjør andre visuelle endringer på alert

    Lenker

    Lenker i komponenten er svart med underline for å ivareta fargekontrast.

    Alert eksempel med link

    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

    TokenFallback
    --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

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack