Gå til hovedinnhold
KOMPONENTER

Standardknapper

Knapper lar brukerne gjøre handlinger og ta valg med et klikk.

Komponenter

PrimaryButton

NavnTypePåkrevd?Default-verdiBeskrivelse
size"medium" | "large" 'medium'

Størrelsen på knappen

loadingboolean false

Om knappen er opptatt, f.eks. med å lagre eller å kjøpe

classNamestring

Ekstra klassenavn

disabledboolean false

Deaktivering av knappen

width"fluid" | "auto" 'auto'

Bredden på knappen.

childrenReactNode

Innholdet i knappen

as"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 157 more ... 'button'

HTML-elementet eller React-komponenten som lager knappen

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

SecondaryButton

NavnTypePåkrevd?Default-verdiBeskrivelse
size"medium" | "large" 'medium'

Størrelsen på knappen

loadingboolean false

Om knappen er opptatt, f.eks. med å lagre eller å kjøpe

classNamestring

Ekstra klassenavn

disabledboolean false

Deaktivering av knappen

width"fluid" | "auto" 'auto'

Bredden på knappen

childrenReactNode

Innholdet i knappen

as"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 157 more ... 'button'

HTML-elementet eller React-komponenten som lager knappen

<SecondaryButton /> er en subtil knappevariant, som brukes til å indikere en sekundær handling som komplimenterer en primær handling. Den bør brukes for 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.

SuccessButton

NavnTypePåkrevd?Default-verdiBeskrivelse
size"medium" | "large" 'medium'

Størrelsen på knappen

loadingboolean false

Om knappen er opptatt, f.eks. med å lagre eller å kjøpe

classNamestring

Ekstra klassenavn

disabledboolean false

Deaktivering av knappen

width"fluid" | "auto" 'auto'

Bredden på knappen

childrenReactNode

Innholdet i knappen

as"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 157 more ... 'button'

HTML-elementet eller React-komponenten som lager knappen

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

NegativeButton

NavnTypePåkrevd?Default-verdiBeskrivelse
size"medium" | "large" 'medium'

Størrelsen på knappen

loadingboolean false

Om knappen er opptatt, f.eks. med å lagre eller å kjøpe

classNamestring

Ekstra klassenavn

disabledboolean false

Deaktivering av knappen

width"fluid" | "auto" 'auto'

Bredden på knappen.

childrenReactNode

Innholdet i knappen

as"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 157 more ... 'button'

HTML-elementet eller React-komponenten som lager knappen

<NegativeButton /> indikerer en potensielt negativ eller irreversibel 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.

TertiaryButton

NavnTypePåkrevd?Default-verdiBeskrivelse
classNamestring

Ekstra klassenavn

disabledboolean false

Deaktivering av knappen

childrenReactNode

Innholdet i knappen

as"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 157 more ... 'button'

HTML-elementet eller React-komponenten som lager knappen

<TertiaryButton /> 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.

Button

NavnTypePåkrevd?Default-verdiBeskrivelse
variant"success" | "secondary" | "primary" | "negative" | "tertiary"

Farge og uttrykk på knappen

size"medium" | "large" 'medium'

Størrelsen på knappen

loadingboolean false

Om knappen er opptatt, f.eks. med å lagre eller å kjøpe

classNamestring

Ekstra klassenavn

disabledboolean false

Deaktivering av knappen

width"fluid" | "auto" 'auto'

Bredden på knappen.

childrenReactNode

Innholdet i knappen

as"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 157 more ... 'button'

HTML-elementet eller React-komponenten som lager knappen

<Button /> er grunn-komponenten som lar deg lage de andre knappene. Du vil typisk bruke en av de andre komponentene direkte.

ButtonGroup

NavnTypePåkrevd?Default-verdiBeskrivelse
childrenReactNode

To eller flere Button-komponenter

classNamestring

Ekstra klassenavn

asstring | ComponentClass<any, any> | FunctionComponent<any> "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.

Eksempler

Knapp med ikon og tekst

Store knapper

Retningslinjer for bruk

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

Default størrelsen på våre knapper er “medium”. Men man kan vurdere å bruke “large” som har en større høyde, dersom man trenger knapper med mer oppmerksomhet.

Høyde:
44px
Min-Width:
152px
Høyde:
60px
Min-Width:
188px

Aktiv vs inaktiv knapp

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