Hopp til innhold

Message­Box

En melding er en beskjed til brukeren som vises i tilknytning til innhold på siden. Det kan være et varsel om at noe er feil, informasjon om at noe mangler i et skjema, eller en bekreftelse på at noe har blitt oppdatert.

EksemplerBrukDesignKode

Kom i gang

Installer
npm i @fremtind/jkl-message-box-react
Bruk
import { InfoMessageBox } from "@fremtind/jkl-message-box-react";



// Importer stilark via JavaScript med CSS-loader.

import "@fremtind/jkl-message-box/message-box.min.css";

// Komponenten trenger stilarket til ikonpakka for å vises riktig

import "@fremtind/jkl-icons/icons.min.css";



// Eller importer stilark via SCSS.

@use "@fremtind/jkl-message-box/message-box";

// Komponenten trenger stilarket til ikonpakka for å vises riktig

@use "@fremtind/jkl-icons/icons";
React
Versjon
Dokumentasjon
Readme
Changelog

Live demo

MessageBox
Egenskaper
Visning
Tema
Tetthet
const [dismissed, setDismissed] = React.useState(false);



const dismissAction = false

  ? {

      handleDismiss: () => {

        setDismissed(true);

        setTimeout(() => setDismissed(false), 2600);

      },

      buttonTitle: "Merk som lest",

    }

  : undefined;



const components = {

  Info: InfoMessageBox,

  Success: SuccessMessageBox,

  Error: ErrorMessageBox,

  Warning: WarningMessageBox,

};



const Component = components['Info'];



return (

  <Component

    fullWidth={false}

    dismissed={dismissed}

    dismissAction={dismissAction}

    title={false ? undefined : "Info"}

  >

    Hei, jeg er en melding av typen Info

  </Component>

);

Tilgjengelighet

Når vi bruker meldinger med farge, må vi alltid huske å ha en god og beskrivende tekst, siden farge ikke er et godt nok kjennetegn for alle brukere. Skriv en presis meldingstekst, der du sier det viktigste først.

ErrorMessageBox og WarningMessageBox har role="alert", som betyr at innholdet vil bli lest opp av skjermlesere uansett hvor skjermleserens markør befinner seg på siden. Rollen kan overstyres.

React API

Her finner du en oversikt over props på komponentene i pakken.