Button

npm install @entur/button

@import '@entur/button/dist/styles.css';

Varianter

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.

Størrelser

Standardstørrelsen på våre knappene er “medium”. Trenger man en knapp som tar mer fokus kan man bruke "large" med en større høyde. Hvis man ønsker en knapp med mindre fokus eller som tar mindre plass kan man bruke size="small".

Knapper i gruppe

Om du skal ha flere knapper ved siden av hverandre, bør du wrappe dem i en <ButtonGroup />. Dette gir deg riktig avstand mellom knappene.

Knapp med 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.

Retningslinjer

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

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.

Universell utforming

Det er flere ting å tenke på ved bruk av knapper med tanke på universell utforming:

• Knapper må ha tilgjengelig navn (f.eks. via aria-label, aria-labelledby eller synlig tekst).
• Knapper uten tekst (for eksempel ikonknapper) bør bruke en aria-label for å beskrive funksjonen.
• Gi tilstrekkelig avstand mellom knapper for å unngå utilsiktede klikk.
• Sørg for at knappene skiller seg tydelig fra andre elementer på siden.

Disabled state

Knapper må ha en klar og forståelig hensikt, og det bør være åpenbart hva som skjer når brukeren klikker på dem. Derfor anbefaler vi å unngå disabled på knapper så langt det lar seg gjøre. Dette fordi disabled kan bryte WCAG-reglene:

• Manglende tilbakemelding. Deaktiverte knapper er ofte fullstendig inaktive og gir ingen respons når brukeren interagerer med dem. Dette kan føre til forvirring blant brukere som ikke forstår hvorfor knappen ikke virker. Det kan også føre til at brukere av skjermlesere ikke får en indikasjon på hvorfor knappen er inaktiv.

• Manglende tilgjengelighet for hjelpemiddelteknologi. Deaktiverte knapper kan bli hoppet over av hjelpemiddelteknologi som skjermlesere, fordi slike knapper vanligvis fjernes fra fokusrekkefølgen. Dette betyr at brukere som navigerer med tastatur eller skjermlesere, kanskje aldri oppdager at knappen eksisterer.

• Dynamisk oppdatering av status. Hvis en knapp aktiveres eller deaktiveres basert på brukerens handlinger, må disse endringene kommuniseres effektivt til brukeren. Mange implementasjoner av deaktiverte knapper informerer ikke brukere om statusendringen, noe som skaper trøbbel for personer som navigerer med skjermlesere eller andre hjelpemidler.

• Forvirrende designmønstre. Brukere forstår ofte ikke hvorfor en deaktivert knapp ikke kan brukes, spesielt hvis det ikke finnes tydelig informasjon om hva som må gjøres for å aktivere den. Dette kan føre til frustrasjon, spesielt for brukere med kognitive eller læringsrelaterte utfordringer.

Dersom du likevel trenger å bruke deaktivert knapp

• Bruk tydelig hjelpetekst. Forklar på forhånd hva som må gjøres for å aktivere knappen. Dette kan gjøres gjennom visuelle hjelpemidler eller tekst nær knappen. Og/eller aria-label for teknologiske hjelpemidler.

• Oppretthold kontrast. Selv om knappen ikke er interaktiv, bør den ha tilstrekkelig kontrast til å være synlig for alle brukere. Bruk alternative visuelle signaler som ikke senker kontrasten, som et ikon eller en stilendring som fortsatt oppfyller kontrastkravene.

• Vis alltid knappen som klikkbar. Gjør knappen klikkbar, men gi tilbakemelding når den ikke kan utføre en handling, for eksempel via en alert eller melding som forklarer hvorfor handlingen ikke er mulig.

Kilder:

• 3.3.1 Identifikasjon av feil
• 4.1.2: Navn, rolle, verdi
• 1.3.1: Informasjon og relasjoner
• 4.1.3: Statusmeldinger

Props

PrimaryButton

import { PrimaryButton } from '@entur/button';

Denne komponenten har ingen props

SecondaryButton

import { SecondaryButton } from '@entur/button';

Denne komponenten har ingen props

SuccessButton

import { SuccessButton } from '@entur/button';

Denne komponenten har ingen props

NegativeButton

import { NegativeButton } from '@entur/button';

Denne komponenten har ingen props

Button

import { Button } from '@entur/button';

Denne komponenten har ingen props

ButtonGroup

import { ButtonGroup } from '@entur/button';

Denne komponenten har ingen props