Message
Message viser kontekstuell informasjon, advarsler, suksessmeldinger og feilmeldinger til brukeren. Komponenten er tilgjengelig ut av boksen med riktig role og aria-attributter for alle varianter. Bruk riktig variant for å kommunisere alvorlighetsgraden av meldingen.
Forsikringen din fornyes automatisk 1. januar 2025.
Viktig informasjon
Ikke bruk Message for inline skjemafeil — bruk errorLabel på skjemakomponentene i stedet. Message passer best for meldinger som gjelder hele skjemaet eller siden, ikke enkeltfelt.
Props
Prop | Type | Påkrevd | Standard | Beskrivelse |
|---|---|---|---|---|
variantEgendefinert | "info" | "success" | "warning" | "error" | Nei | "info" | info: nøytral informasjon eller tips. success: bekreftelse på at noe gikk bra. warning: viktig informasjon brukeren bør lese. error: noe gikk galt og brukeren må gjøre noe. |
childrenReact | React.ReactNode | Ja | — | Meldingsteksten. |
titleReact | string | Nei | — | Valgfri overskrift i meldingen. |
fullEgendefinert | boolean | Nei | false | Strekker meldingen til full bredde. |
dismissedEgendefinert | boolean | Nei | — | Kontrollert tilstand for om meldingen er lukket. |
onDismissReact | () => void | Nei | — | Klikk-handler for lukkeknappen. |
Eksempler
Info-melding
En enkel informasjonsmelding.
Forsikringen din fornyes automatisk 1. januar.
Alle varianter
Velg variant basert på innholdets natur.
Skjemaet er under vedlikehold frem til klokken 14.
Endringene dine ble lagret.
Du har ikke lagret de siste endringene.
Noe gikk galt. Prøv igjen om litt.
Med tittel
Legg til title når meldingen er lang nok til å trenge struktur.
Utløpende sesjon
Du vil bli logget ut om 5 minutter på grunn av inaktivitet.
Full bredde
Bruk fullWidth for meldinger som skal dekke hele sidebredden, f.eks. global systemstatus.
Tjenesten er nede
Vi opplever for øyeblikket tekniske problemer. Prøv igjen om noen minutter.