Button

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.

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

1. Ikon
2. Tekst
3. Bakgrunn/outline