Hopp til innhold
Aksel

Aksel

Designsystemet
God praksisBloggen

Komponenter

LocalAlert

LocalAlert brukes til å varsle om hendelser som påvirker deler av løsningen. Den plasseres i nærheten av hendelsen.

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:

  • Varselmelding i nærheten av hendelsen

Uegnet til:

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

Eksempler

Retningslinjer

Antall per side

Hvis du har flere alerts på samme side vil de stjele oppmerksomhet fra hverandre, og det vil være vanskelig for brukeren å skjønne hva som skjer. Helst én av gangen.

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å

<LocalAlert.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. I de tilfellene det ikke er passende, kan du sette role={undefined} for å overstyre dette. I disse tilfellene, vurder om InfoCard vil være mer passende.

Props

LocalAlert

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

LocalAlert.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

LocalAlert.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

LocalAlert.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

LocalAlert.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