Messagebox
Release dato: 21.03.2023
Sist oppdatert: 29.10.2026
Messagebox brukes for å gruppere informasjon og hjelpe brukeren med å forstå innholdet på en side, uten at det krever handling. Den gjør det lettere å skille ut tips, veiledning eller annen støtteinformasjon fra det øvrige innholdet.
Messagebox skal ikke brukes til status eller varslinger – da skal du bruke alert.
Test komponenten
<PktMessagebox title="Dette er en meldingsboks">Dette er innholdet i meldingsboksen.</PktMessagebox>
Relaterte komponenter
Når du skal vise status, feil eller bekreftelser
Når du bare vil gruppere innhold visuelt
Når du vil gi ekstra informasjon, men bare ved behov
Varianter
Varianter
I Punkt finnes messagebox i fem ulike fargevarianter
| Skin | Beskrivelse |
|---|---|
| Gray | Standard. Nøytral info som følger mørk modus |
| Beige | Nøytral info, generell støtte |
| Blue | Hjelp og forklaring |
| Red | For å gjøre brukeren oppmerksom på noe viktig som kan ha konsekvenser |
| Green | Positiv bekreftelse eller fremheving |
Gray støtter mørk modus. Beige, blue, red og green har ingen mørk variant. De beholder fargene fra lys modus, også teksten og lenkene.
Størrelser
Alle variantene kommer i to størrelser
| Variant | Beskrivelse |
|---|---|
| Default | Standardstørrelse |
| Small | Brukes der plassen er begrenset |
Retningslinjer for bruk
Bruk messagebox når
- du vil gi brukeren kontekst, støtte eller forklaring
- informasjonen ikke krever at brukeren gjør noe
- du trenger å fremheve tekst visuelt, men uten varslingseffekt
Unngå messagebox når
- du gir status, feil eller bekreftelser (bruk alert)
- du bare trenger visuell inndeling (bruk card)
- meldingen vises midlertidig og skal fanges opp raskt (vurder toast alert eller inline alert)
Messagebox er en fleksibel komponent
Komponenten har ingen bestemte retningslinjer for bruk, den kan fritt brukes til innhold du ønsker å gruppere eller fremheve. Ved å bruke komponenten kan du hjelpe brukerne med å visuelt skille mellom det som er relatert og det som ikke er det.
Responsivitet
Automatisk skalering
Messagebox tilpasser seg automatisk bredden på skjermen, og innholdet bryter linjer der det er nødvendig. Den fungerer godt både i stående og liggende visning på mobil.
Du trenger ikke å gjøre manuell tilpasning, men
- pass på at teksten ikke blir for tett eller lang
- unngå å bruke mange messageboxes rett etter hverandre (det skaper støy)
Universell utforming
Messagebox er en visuell komponent. Den skal ikke brukes til statiske meldinger som må oppfattes via skjermleser (bruk da alert).
Det er viktig at du husker at messagebox ikke skal ha ARIA-roller. Ikke bruk role="status" eller aria-live og at tekst og tittel må være selvforklarende, også uten annen kontekst.
Anatomi
| Element | Beskrivelse |
|---|---|
| 1. Bakgrunn og kantlinje | Bakgrunnsfarge med tilhørende kantlinje |
| 2. Tittel (valgfritt) | Oppsummerer innholdet, gjør det lettere å skumlese |
| 3. Innhold | Forklarende tekst, kan inneholde lister, lenker, knapper eller ikoner |
Implementasjon i kode
Hvordan ta komponenten i bruk?
import @oslokommune/punkt-elements/dist/pkt-messagebox.js;import { PktMessagebox } from '@oslokommune/punkt-react';<script src="https://punkt-cdn.oslo.kommune.no/20/elements/pkt-messagebox.js" type="module"></script>Testing
Elements: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig før du tester den. Dette kan gjøres ved å kjøre denne kodelinjen før testene kjøres:
await window.customElements.whenDefined("pkt-messagebox");Egenskaper
Props
- Prop:
title?- Type:
string- Beskrivelse:
- Tittelen på meldingsboksen
- Prop:
skin?- Type:
"gray" | "beige" | "blue" | "red" | "green"- Standardverdi:
"gray"- Beskrivelse:
- Velg farge på meldingsboksen. Bare gray følger mørk modus. Beige, blue, red og green ser like ut i lys og mørk modus.
- Prop:
compact?- Type:
boolean- Standardverdi:
false- Beskrivelse:
- Gjør meldingsboksen mindre
- Prop:
closable?- Type:
boolean- Standardverdi:
false- Beskrivelse:
- Viser lukkeknapp
Slots
- Slot:
default- Beskrivelse:
- Innholdet i meldingsboksen
Events
- Event:
onClose- Type:
() => void- Beskrivelse:
- React: Event som trigges når meldingsboksen lukkes
- Event:
close- Type:
CustomEvent<{ origin: MouseEvent }>- Beskrivelse:
- Elements: Event som trigges når meldingsboksen lukkes
- Event:
on-close- Status:
Deprecated close.on-closefjernes i en senere hovedversjon.- Type:
CustomEvent<{ origin: MouseEvent }>- Beskrivelse:
- Elements: Samme event som
close, beholdt for eldre Vue-oppsett.