Messagebox
Release dato: 21.03.2023
Sist oppdatert: 31.10.2024
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.
Live demo
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 fire ulike fargevarianter
| Skin | Beskrivelse |
|---|---|
| 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 |
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/latest/elements/pkt-messagebox.js" type="module"></script>Testing
Elements og React: 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");Dersom du bruker verktøyene i punkt-testing-utils så kan dette bli gjort automatisk for deg.
Props og tokens
| Prop | Type | Beskrivelse |
|---|---|---|
title | string | Tittelen på meldingsboksen |
skin | beigeblueredgreen | Velg farge på meldingsboksen |
compact | boolean | Gjør meldingsboksen mindre |
closable | boolean | Viser lukkeknapp |
| Slot (children) | Beskrivelse |
|---|---|
default | Innholdet i meldingsboksen |
| Event | Beskrivelse |
|---|---|
onClose | React: Event som trigges når meldingsboksen lukkes |
on-close | Vue: Event som trigges når meldingsboksen lukkes |
Farger
| Variant | CSS Variabel |
|---|---|
| Bakgrunn | |
| Border | |
| Tekst | |