Buttons

Knapper starter en handling. Teksten på knappen forteller hva som vil skje når brukeren klikker på den.

Kom i gang

Installer

npm i @fremtind/jkl-button-react

Bruk

import { PrimaryButton } from "@fremtind/jkl-button-react";

// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-button/button.min.css";

// Button bruker loader internt for å vise lasteindikator i knappen.
import "@fremtind/jkl-loader/loader.min.css";

// Eller importer stilark via SCSS.
@use "@fremtind/jkl-button/button";
@use "@fremtind/jkl-loader/loader";

React

Versjon
Dokumentasjon: Readme; Changelog

Live demo

Buttons

const [showLoader, setShowLoader] = React.useState(false);

const components = {
  Primary: PrimaryButton,
  Secondary: SecondaryButton,
  Tertiary: TertiaryButton,
};

const Component = components['Primary'];

return (
  <Component
    className="jkl-spacing-l--right"
    loader={
      false
        ? {
            showLoader: true,
            textDescription: "Laster innhold",
          }
        : undefined
    }
  >
    PrimaryButton
  </Component>
);

React API

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