README
@fremtind/jkl-button-react
Beskrivelse
Se portalen for bruk og prinsipper.
Kom i gang
Lær hvordan du kan ta i bruk Jøkul
Bruk av React-pakken
Installasjon
Installér pakken med
yarn add @fremtind/jkl-button-react
ellernpm i @fremtind/jkl-button-react
. Stil-pakken blir automatisk installert som en avhengighet.Importer både React-pakken (velg komponenten(e) du trenger) og stil-pakken i prosjektet ditt:
import { PrimaryButton, SecondaryButton, TertiaryButton } from "@fremtind/jkl-button-react";
import "@fremtind/jkl-button/button.min.css";
import "@fremtind/jkl-loader/loader.min.css"; // stil for å bruke loader i knappen
Bruk
Komponentene tar følgende props:
children
: Påkrevd. Innholdet i knappen.ReactNode
onClick
: Påkrevd. Klikkhåndtering for knappen. Får en MouseEvent som første argument.MouseEventHandler<HTMLButtonElement>
forceCompact
: Angir at knappen skal vises i liten versjon uavhengig av skjermstørrelse.boolean
className
: Eventuell(e) css-klassenavn for komponenten.string
En enkel bruk av knapper kan se slik ut:
<SecondaryButton onClick={showDetails}>Vis detaljer</SecondaryButton>
Knapper kan ha annet innhold enn ren tekst, for eksempel for å vise aktivitet knyttet til knappens handling:
<PrimaryButton
onClick={uploadFiles}
loader={{
showLoading: isUploading,
textDescription: "Laster opp filer",
}}
>
Last opp
</PrimaryButton>