Om komponenten
Knapper har en viktig funksjon og er direkte knyttet til en handling (action). De gir brukeren mulighet til å utføre handlinger som å logge inn, sende inn et skjema eller laste opp en fil.
Les om plassering av knapper og button groups.
Husk, en tommelfingerregel er å skille mellom funksjonen til lenker og knapper:
- Bruk lenker når brukeren skal komme til en ny side
- Bruk knapper når brukerne skal utføre en konkret handling: logg inn, send, last opp osv.
Med det sagt, så er ikke dette noe som er satt i stein. Det vil være tilfeller der en knapp fungerer bedre enn en lenke selvom brukeren navigerer til en ny side, f.eks dersom det kun er én primærhandling brukeren kan gjøre på den aktuelle siden.
Varianter
Knappene i Punkt har 3 ulike varianter:
Primærknapp
Primærknapp er fylt. Brukes til den viktigste handlingen på en side - hovedhandlingen (primary action). En side kan noen ganger ha mer enn én hovedhandling, men bør ikke ha mange.
Sekundærknapp
Sekundærknapp har outline. Brukes til handlinger som ikke er like viktige for oss eller brukeren.
Tertiærknapp
Tertiærknapp brukes sammen med en av de andre knappene på et valg som ikke skal prioriteres, f.eks. “avbryt”. Tertiærknappen kan også brukes i andre elementer der den vanlige knappestylingen ville vært forstyrrende, f.eks. i header.
Størrelser
Knapper kan brukes i tre størrelser; liten, medium og stor.
Medium er størrelsen som brukes i de fleste situasjoner og stor knapp brukes for ekstra oppmerksomhet dersom nødvendig.
Liten knapp kan brukes i unntakstilfeller ved behov. Viktig: Størrelsen på den lille knappen er WCAG AA-godkjent, ikke AAA. Derfor er det viktig at du helst bruker medium eller large, og kun bruker liten knapp dersom det er nødvendig på grunn av plassmangel eller andre spesielle behov i løsningen. Prøv å unngå å bruke liten knapp på sider som kan navigeres til fra de åpne nettsidene på oslo.kommune.no, da denne knappestørrelsen ikke brukes på resten av nettsidene.
Tekst og ikon
Alle knappene kan brukes med et ikon fra biblioteket på høyre eller venstre side. Knappen kan også brukes helt uten tekst, altså med kun ikon.
Farger
Knapper kan brukes med forskjellige farger. Mørk blå er primærfargen som brukes på knapper. I noen situasjoner brukes andre farger for å skille mellom innhold. Men vær forsiktig med å overbruke farger, og gå for mørk blå i de fleste tilfeller:
- Blå: $blue-dark (#2A2859)
- På mørk bagrunn: $blue-light (#B3F5FF)
Du kan også bruke de andre fargene fra fargepaletten:
Slik bruker du komponenten
Tekst på knapper
Knappetekster skal være så enkle og korte som mulig og skal oppfordre til handling. Bruk helst bare to ord.
Velg verb i oppfordringsform (imperativ) på knapper for å vise brukerne at de kan utføre en handling (call to action).
Les mer informasjon om tekster i knapper
Gjør dette/ikke gjør dette
Ikke bruk avrundede kanter
Ikke ha for lav kontrast
Ikke endre størrelse på teksten
Tenk over ikonbruken
Ikke bruk bare store bokstaver
Anatomi
- Ikon
- Tekst
- Bakgrunn/outline
