Button v4.7.2
Knapper lar brukerne ta valg, utføre handlinger, eller gå videre i en skjemaflyt.
Retningslinjer
Et ikon sammen med tekst kan tydeliggjøre handlingen. Vi har også IconButton i kodebasen, men denne vil fjernes etterhvert. Årsaken til dette er at den har liten klikkflate sammenlignet med Button. Alternativet er altså å bruke en Button med kun ikon.
Varianter
Primary
Primary fremhever hovedhandlingen på siden, og burde alltid ha en tekst.
Secondary
Secondary er den mest fleksible knappen, og kan brukes for de fleste handlingene.
Ghost
Ghost burde ikke stå alene i et grensesnitt, siden den ikke har en tydelig klikkflate.
Sidestilte knapper
Dersom du har behov for å gruppere knapper vil du ofte ha spørsmål om hvilken variant som skal stå hvor.
Hovedregelen er følge leserekkefølgen så langt det lar seg gjøre. Eksempel på dette er ved bekreftelsesgruppering. Her skal primary varianten stå til venstre.
Unntakene er for eksempel dersom knappene står i en modal, eller i skjemaer. Husk å endre dette kun visuelt med stilark og ikke i DOM-en. Dette gir brukere med tilgjengelighetsverktøy en lik opplevelse som den visuelle.
I Fremtind lager vi mange skjemaer, og mange modaler, derfor vil mange ta i bruk unntakene heller enn hovedregelen. Det er helt greit.
Hvorfor eksisterer unntakene
Vi ønsker at plasseringen av knapper er intuitiv. I unntakstilfellene handler det om å møte dette ønsket.
- I modaler er det best at bekreft står til høyre i gruppa, og lengst til høyre i modalen, fordi den kommer nærmest den dominante hånden for de fleste brukerne.
- I skjemaer gjelder det samme prinsippet i tillegg til at de fleste opplever neste side til høyre for den siden de er i, og forrige som venstre.
