Knapper lar brukerne gjøre handlinger og ta valg med et klikk.
npm install @entur/button
@import '@entur/button/dist/styles.css';
Button-props
primary
primary, valgt element, trykk for å fjerne
secondary
success
negative
medium
small
medium, valgt element, trykk for å fjerne
large
Bruk
Varianter
Positive (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.
Tertiary
Tertiary button er deprekert!
Tertiary brukes på steder hvor de andre knappevariantene bruker for stor plass, og en mindre knapp er nødvendig. Alternativt kan man også bruke ActionChip for dette behovet, men tertiærknappen finnes som et alternativ til den.
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.
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".
Min-bredde: 5.75rem
Høyde: 2rem
Min-bredde: 9.5rem
Høyde: 3rem
Min-bredde: 11.75rem
Høyde: 3.75rem
Prinsipper
Kort oppsummert: Unngå inaktive knapper så godt det lar seg gjøre.
Innafor
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
Uttafor
Inaktive knapper bør unngås fordi den skaper vanligvis en elendig brukeropplevelse og utelukker mange mennesker med funksjonshemninger
Når du ved et uhell klikker på dem, får du ingen konkret tilbakemelding
Irritasjonsmoment, brukeren skjønner ikke hva knappen sier eller hvorfor den ikke er klikkbar
Komponenter
PrimaryButton
import { PrimaryButton } from '@entur/button';
Navn
Type
Default-verdi
Beskrivelse
size?
"small" | "medium" | "large"
'medium'
Størrelsen på knappen
loading?
boolean
false
Om knappen er opptatt, f.eks. med å lagre eller å kjøpe
className?
string
Ekstra klassenavn
disabled?
boolean
false
Deaktivering av knappen
width?
"fluid" | "auto"
'auto'
Bredden på knappen.
children
ReactNode
Innholdet i knappen
as?
string | React.ElementType
An override of the default HTML tag.
Can also be another React component.
ref?
any
SecondaryButton
import { SecondaryButton } from '@entur/button';
Navn
Type
Default-verdi
Beskrivelse
size?
"small" | "medium" | "large"
'medium'
Størrelsen på knappen
loading?
boolean
false
Om knappen er opptatt, f.eks. med å lagre eller å kjøpe
className?
string
Ekstra klassenavn
disabled?
boolean
false
Deaktivering av knappen
width?
"fluid" | "auto"
'auto'
Bredden på knappen.
children
ReactNode
Innholdet i knappen
as?
string | React.ElementType
An override of the default HTML tag.
Can also be another React component.
ref?
any
SuccessButton
import { SuccessButton } from '@entur/button';
Navn
Type
Default-verdi
Beskrivelse
size?
"small" | "medium" | "large"
'medium'
Størrelsen på knappen
loading?
boolean
false
Om knappen er opptatt, f.eks. med å lagre eller å kjøpe
className?
string
Ekstra klassenavn
disabled?
boolean
false
Deaktivering av knappen
width?
"fluid" | "auto"
'auto'
Bredden på knappen.
children
ReactNode
Innholdet i knappen
as?
string | React.ElementType
An override of the default HTML tag.
Can also be another React component.
ref?
any
NegativeButton
import { NegativeButton } from '@entur/button';
Navn
Type
Default-verdi
Beskrivelse
size?
"small" | "medium" | "large"
'medium'
Størrelsen på knappen
loading?
boolean
false
Om knappen er opptatt, f.eks. med å lagre eller å kjøpe
className?
string
Ekstra klassenavn
disabled?
boolean
false
Deaktivering av knappen
width?
"fluid" | "auto"
'auto'
Bredden på knappen.
children
ReactNode
Innholdet i knappen
as?
string | React.ElementType
An override of the default HTML tag.
Can also be another React component.
Om knappen er opptatt, f.eks. med å lagre eller å kjøpe
className?
string
Ekstra klassenavn
disabled?
boolean
false
Deaktivering av knappen
width?
"fluid" | "auto"
'auto'
Bredden på knappen.
children
ReactNode
Innholdet i knappen
as?
string | React.ElementType
"button"
Et HTML-element eller en React-komponent som komponenten tar utgangspunkt i for å lage denne knappevarianten
An override of the default HTML tag.
Can also be another React component.
aria-label?
string
Tekst som leses opp på skjermleser (nødvendig når knappetekst mangler)
ref?
any
<Button /> er grunn-komponenten som lar deg lage de andre knappene. Du vil typisk bruke en av de andre komponentene direkte.
ButtonGroup
import { ButtonGroup } from '@entur/button';
Navn
Type
Default-verdi
Beskrivelse
children?
ReactNode
To eller flere Button-komponenter
className?
string
Ekstra klassenavn
as?
string | React.ElementType
"div"
HTML-elementet eller React-komponenten som lages
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.