I tidligere knappeversjon ble teksten satt til all-caps automatisk av stilsettet, dette er nå endret til
sentence case som standard for alle flater. Sentence case starter med uppercase og fortsetter i lowercase som angitt her.
Når man nå tar i bruk nav-frontend-knapper v3.1.0
eller nyere så burde man gå gjennom knappebruken i løsningene sine for å sjekke dette.
Gjør dette
Ikke gjør dette
Normal
Dette er hvordan en normal knapp skal se ut. De fleste knappene i løsningene våre skal se
slik ut. Hvis du er i tvil om hvilken knapp du skal bruke, er det sikkert denne som er
riktig.
<Knapp>Normal</Knapp>
Kopiert!
Hovedknapp
Denne knappen skal brukes der løsningen/siden har en tydelig hoved-/primær-funksjon (f.eks.
"Lagre" eller "Send søknad"). Merk at det som regel bare skal finnes èn eneste hovedknapp
på en og samme side. Et mulig unntak til denne regelen kan være inne i en modal-rute som
legger seg oppå det øvrige innholdet hvor det er tillatt med en ekstra hoved- eller
fare-knapp ved behov.
<Hovedknapp>Hovedknapp</Hovedknapp>
Kopiert!
Fareknapp
Denne knappen skal brukes på samme måte som hovedknapp, men bare der hoved-/primær-funksjonen
kan føre til tap av viktig lagret informasjon (f.eks. "Slett") eller ellers bety svært negative
konsekvenser hvis handlingen ikke var ønsket (f.eks. som en bekreftelse på at brukeren ikke lenger
ønsker å motta ytelser).
<Fareknapp>Fareknapp</Fareknapp>
Kopiert!
Flatknapp
Denne knappen kan brukes som et alternativ til normal knapp ved behov.
<Flatknapp>Flatknapp</Flatknapp>
Kopiert!
Med spinner
Alle knappene våre har støtte for å vise en spinner.
Merk at disabled knapper bør unngås, og at man heller bør bruke vanlige knapper kombinert med tydelige feilmeldinger hvis handlingen av en eller annen grunn ikke er tillatt. Ler mer om dette på siden vår om `disabled`.
Du kan også velge å implementere knappene våre som lenker. I så fall trenger du bare å installere nav-frontend-knapper-style-pakken, og deretter legge til CSS-klassene på lenkene selv.
info
Vær obs på at det ikke finnes noe disabled-attributt for lenker. For å "disable" en lenke må du i stedet fjerne href-attributtet.
Alle knappene kan rendres i en mindre 32px versjon.
advarsel
Som hovedregel skal vi alltid bruke de store knappene våre. For tilfeller med svært begrenset plass kan de mindre knappene brukes unntaksvis ved klart behov.
Bruk kompakt for å redusere høyre-/venstre-padding på knappene.
advarsel
Husk at knapper med bare ikoner også må få en tekst-verdi av hensyn til skjermlesere. Utility-klassen sr-only som gis av mixins-fila i Core-pakken kan brukes for å skjule teksten visuelt.