Button

Om komponenten

Button lar brukeren utføre en handling ved å klikke på en knapp.

Les om plassering av knappehirerarkiet og plassering.

Egnet til:

• Handlinger som å logge inn, bli medlem, laste ned skjema, avbryte etc.
• Linker

Uegnet til:

• Viktig statisk informasjon

Varianter

Vi har tre ulike varianter av Button, og en enkeltstående ikon-knapp. Alle knapper kan brukes med et ikon, på høyre eller venstre side.

Primærknapp

Brukes til den handlingen som skal gis mest oppmerksomhet. En side kan iblant ha mer enn én hovedhandling, men bør ikke ha mange.

<>
  <Button variant="primary">Primærknapp</Button>
  <Button variant="primary">Primærknapp<ArrowRight /></Button>
  <Button variant="primary" href="#primary-cta">
    Primærlink
  </Button>
</>

Sekundærknapp

Brukes til handlinger som ikke er like viktige som hovedhandlingen, og kommer ofte i tillegg til primærknappen.

<>
  <Button variant="secondary">Sekundærknapp</Button>
  <Button variant="secondary">Sekundærknapp<ArrowRight /></Button>
  <Button variant="secondary" href="#secondary-cta">
    Sekundærlink
  </Button>
</>

Tertiærknapp

Brukes for valg som ikke prioriteres, som “avbryt”. Den kan også brukes som navigasjonselement, som for eksempel inngangen på et kort eller en artikkel.

<>
  <Button variant="tertiary">Tertiærknapp</Button>
  <Button variant="tertiary">Tertiærknapp<ArrowRight /></Button>
  <Button variant="tertiary" href="#tertiary-cta">
    Tertiærlink
  </Button>
</>

Knapp med ikon

Kan brukes som navigasjon eller enkeltstående handling, som å lukke en fane. Det bør helst også være en tekst som forklarer handlingen, slik som “Lukk”. Sørg for at knappen er forståelig for skjermleserbrukere ved å bruke aria-labels.

<Button isIconOnly aria-label="Lukk">
  <Close />
</Button>

Retningslinjer

Husk på også å lese om knappehirerarkiet i OBOS. Den er flyttet over på ny side ettersom den gjelder for flere komponenter hvor button er nested.
Les om plassering av knappehirerarkiet og plassering.

Knappegruppering av samme nivå

Knappegruppering av alle nivåene

Tertiærknapp innrykk

Tertiærknappen har en innebygget indentering. Den kan forklares med å kunne støtte to måter. Den ene er at teksten faller på samme vertikale linje som de andre knappene. Den andre er grunnet fokusmarkeringen rundt tertiærknappen, det må være nok luft mellom teksten og fokusmarkeringen.

Tertiærknapp vs. inline-lenke

Tertiærknapp kalles gjerne knappelenke i våre CMSer. Når vi publiserer artikler skiller vi mellom bruken av inline-lenke og knappelenke slik:

Knappelenke brukes når brukeren tas til en oppgave, for eksempel "Opprett bufferkonto".

Inline-lenker bruker vi når leseren skal tas videre til annet relevant innhold i løpende tekst. For eksempel "Les mer: Slik fylte Nina opp bufferkontoen sin."

Formatering

Anatomi

Teksten i knappen er det viktigeste elementet og er meningsbærende, siden teksten ofte formidler handlingen til brukeren.

1. Ikon Et ikon som gir mening i konteksten den brukes i.
2. Tekst Knappeteksten er det viktigste elementet, og vi bruker stor forbokstav. Knappeteksten er venstrejustert (se justering for unntak).
3. Kontainer Corner-radius for knapp er satt til 8px og skal ikke endres. Bruk kun farger tillatt for varianten av knapp du bruker.

Farger

Knapper kan brukes med forskjellige farger. Obos mørk blå er primærfargen som brukes på knapper. I noen situasjoner brukes andre farger for å skille mellom mellom bakgrunn og hvilket område en opererer i.

Justering

Universell utforming

Husk på

• Hold deg til korte, konsise tekster i knappene. Det skal være enkelt for brukeren å forstå hva som skjer om de trykker på knappen.
• Dersom du bruker andre farger i knappene: dobbeltsjekk at du har god nok kontrast, minst 4.5:1 (Du kan bruke Stark plugin i Figma eller CCA - Color Contrast Analyser)
• Ikke glem visuell feedback - bruk riktig hover, active og focus-states!
  Sørg for at knappen er forståelig for de som bruker skjermleser, dette er spesielt viktig om du bruker knapp med bare ikon. I tilfeller hvor ikonet er meningsbærende, for eksempel en knapp med et e-post ikon og teksten “send”, så kan skjermleseren bare lese “button,send” I disse tilfellene bør du bruke aria-label for å skjule beskrivelsen av knappen visuelt, men den leses opp av skjermleseren.
• Hvis du bruker animasjon for å gi tilbakemelding på knappens tilstand, bør du sørge for at det er mulig å slå av animasjonen.
• Husk om du har to eller flere interaktive elementer som en knapp ved siden av hverandre at det skal være minst 8px mellom disse.

Sjekkliste

✓ Jeg har kun én primærknapp per side

✓ Knappene mine har korte og konsise tekster

✓ Jeg har dobbelsjekket kontrasten på fargene (Dersom du har endret på disse)

✓ Jeg har sjekket kontrasten med bakgrunnen på knappen at den ikke er under 3.1.1 i kontrast.

✓ Vi har tatt i bruk og testet ulike states

✓ Knappen er tydelig og ikke for mye visuelt støy rundt

✓ Vi har lagt til aria-label om nødvendig

✓ Vi har nok luft mellom knappene - 8px eller 16px

✓ Vi har sjekket at knappen er 44x44px.

Les mer

Les mer informasjon om tekster i knapper

WCAG 2.5.5 Target Size (AAA)