Hopp til innhold
Aksel

Aksel

Designsystemet
God praksisBloggen

Komponenter

GlobalAlert

GlobalAlert brukes for å varsle hendelser som påvirker hele løsningen. Den plasseres øverst i løsningen og tar hele bredden.

NyOppdatert 24. november 2025
Github FigmaEndringslogg

Ny funksjon

Denne komponenten er ny eller oppdatert. Tar du den i bruk ønsker vi gjerne innspill til hvordan den fungerer i tjenesten din!

Send innspill

Egnet til:

  • Varselsmelding som gjelder hele løsningen

Uegnet til:

  • Toast
  • "Empty state"
  • Informasjonspanel (se InfoCard)

Eksempler

Retningslinjer

Antall per side

Det bør kun vises ett globalt varsel av gangen. Om det er flere globale hendelser på en gang bør de samles i ett varsel. Flere globale varsler tar stor plass og kan dytte vanlig innhold langt ned.

Innhold

Det er ikke alle som forstår betydningen av ikonene og fargene, derfor er det viktig at innholdet gjør det tydelig hva varselet gjelder. Særlig for feilmeldinger er det viktig at du forteller hva brukeren må gjøre for å komme videre med oppgaven sin.

Tilgjengelighet

Heading-nivå

<GlobalAlert.Title /> er h2 ut av boksen. Husk å oppdatere dette til riktig nivå i kontekst av hvor du bruker den med as-propen.

Alternativtekst

Ikonene har default alternativtekst som kommuniserer alvorlighetsgrad: "Kunngjøring", "Suksess", "Advarsel" og "Feil". Den alternative teksten blir presentert som en del av innholdet for skjermleserbrukere.

Role Alert

Komponenten kommer med role="alert" som gjør at innholdet i komponenten leses opp umiddelbart.

Props

GlobalAlert

status

  • Type:
    "announcement" | "success" | "warning" | "error"
  • Description:

    Type of alert

children

  • Type:
    ReactNode
  • Description:

    Component content.

className?

  • Type:
    string

as?

  • Type:
    "div" | "section"
  • Default:
    "section"
  • Description:

    Changes the HTML element used for the root element.

    Testing: When using axe-core for accessibility testing, section might warn about unique landmarks if you have multiple Alerts on page with the same status. In those cases, consider using div as the root element, or adding unique aria-label or aria-labelledby props. @see 📝 Landmarks unique

size?

  • Type:
    "medium" | "small"
  • Default:
    "medium"
  • Description:

    Changes the size.

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    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). React Docs

GlobalAlert.Header

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    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). React Docs

GlobalAlert.Title

as?

  • Type:
    "h2" | "h3" | "h4" | "h5" | "h6" | "div"
  • Default:
    "h2"
  • Description:

    Changes the HTML element used for the title.

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLHeadingElement>
  • Description:

    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). React Docs

GlobalAlert.CloseButton

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLButtonElement>
  • Description:

    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). React Docs

GlobalAlert.Content

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    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). React Docs