Hopp til innhold

Buttons

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

Primærknapp: brukes til den viktigste handlingen på en side - hovedhandlingen. En side kan noen ganger ha mer enn en hovedhandling, men ikke mange.

Sekundærknapp: brukes til handlinger som ikke er like viktige for oss eller brukeren.

Tertiærknapp: brukes til handlinger som er mindre viktige, eller som kan gi uønskede konsekvenser.

Lastemodus

Hvis du skal bruke lastemodus i knappen må du sørge for at @fremtind/jkl-loader/loader.min.css er lastet inn i klienten.

Knappetyper

Disse tre hovedknappetypene har et hierarki. Når brukeren har flere valg samtidig, skal vi kun ha én primærknapp.

Riktig

Kun én primærknapp

Feil

Flere primærknapper

Tekst på knapper

Knappetekster skal være så enkle og korte som mulig og skal oppfordre til handling. Bruk helst bare to ord:

Knapper som er lenker

Avhengig av situasjonen kan det hende en knapp teknisk sett er et <a />-element. Jøkul støtter å ha knappeklasser på <a />.

Eksempler på bruk

Du finner et eksempel på en primærknapp brukt i skjemakontekst under Profil og Skjemadesign. Koden til eksempelet finner du på GitHub.

React API

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