Button

Bruk Button når

• brukeren skal utføre en konkret handling, for eksempel å lagre eller sende inn et skjema
• handlingen setter i gang noe i løsningen, for eksempel når en dialog skal åpnes

Unngå Button når

• brukeren skal navigere til andre sider eller tjenester, bruk heller Link
• brukeren skal filtrere informasjon, bruk heller Chip
• du vil vise brukeren hvilke filter de har valgt, bruk heller Chip

Retningslinjer

Success (Svært høyt prioritert):

Indikerer en vellykket eller positiv handling. Brukes som “call to action” for svært høyt prioriterte handlinger. Hovedregelen her er kun én action knapp per side. Knappen kan brukes for handlinger som f.eks Betal, Godkjenn osv.

Primary (Høy prioritet):

Brukes kun til primær handlinger som har høyt prioritert på en side. Det bør ikke være mer enn én slik knapp per side eller visning. Kan brukes for handlinger som f.eks Lagre, Send, Gå videre osv.

Secondary (Middels prioritet):

Subtil variant som brukes til å indikere en sekundær handling som komplimenterer en primær handling. Middels prioriterte handlinger og dersom man ikke ønsker at den skal være i fokus eller for å redusere visuell støy når det er mange handlinger av like stor prioritet på siden.

Negative

Indikerer en fare eller potensielt negativ handling. Brukes kun for å advare brukeren mot handlinger som kan føre til negative konsekvenser som f.eks Slett, Fjern, Avbryt osv. Slike handlinger må alltid bekreftes.

Ikon og tekst

Når navngivingen på knappen ikke er tydelig nok, kan man vurdere å bruke ikoner i knapper for å kommunisere tydeligere hva knappen gjør. Ikoner er alltid sammen med en tekst.

Kort oppsummert: unngå inaktive knapper så godt det lar seg gjøre. Les mer om hvorfor under Tilgjengelighet.

Gjør

• Aktiv knapp som validerer (når man klikker på den) erstatter bruk av disabled (inaktiv) knapp
• Validering av påkrevde felter skal skje underveis i skjema, men først når man går ut av inputfeltet
• Hvis man ikke går inn i feltet vil validering først komme når man validerer siden (ved f.eks å klikke “lagre” eller lignende). Det gjelder også for felter som validerer mot baksystemer

Unngå

• Inaktive knapper bør unngås
• Når du ved et uhell klikker på dem, får du ingen konkret tilbakemelding
• Brukeren har vanskeligheter med å forstå hva som er meningen med knappen eller hvorfor den ikke er klikkbar.

Eksempler

<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
  <SuccessButton>Godkjenn</SuccessButton>
  <PrimaryButton>Lagre</PrimaryButton>
  <SecondaryButton>Avbryt</SecondaryButton>
  <NegativeButton>Slett</NegativeButton>
</div>

<ButtonGroup>
    <PrimaryButton>Knapp</PrimaryButton>
    <PrimaryButton>Knapp</PrimaryButton>
    <PrimaryButton>Knapp</PrimaryButton>
</ButtonGroup>