Hopp til innhold
Aksel

Aksel

Designsystemet
God praksisBloggen

Komponenter

InlineMessage

InlineMessage brukes til å vise korte statusmeldinger direkte i kontekst av og innimellom innhold på siden.

NyOppdatert 24. november 2025

Ny funksjon

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

Egnet til:

  • Korte statusmeldinger
Lignende komponenter

Eksempler

Retningslinjer

Mengde og antall

Mengde innhold i en InlineMessage eller antall InlineMessage per side har vi ingen definert grense på annet enn at det skal brukes til korte statusmeldinger. Gjør en vurdering på hvor masete det vil oppleves, og om det gir verdi for brukeren. Om alt er fremhevet, er ingenting fremhevet - "Less is more".

Tilgjengelighet

Hvis InlineMessage dukker opp dynamisk på siden, vurder å sette role="alert" eller role="status" på meldingen.

Props

InlineMessage

status

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

    InlineMessage status.

size?

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

    InlineMessage size.

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