Button

Button lar brukeren utføre en handling, som å sende inn et skjema, lagre endringer eller navigere videre i en prosess.

Egnet til

Handlinger som skjer umiddelbart (f.eks. lagre, sende, bekrefte)
Navigasjon mellom steg i en prosess
Primære og sekundære handlinger i en visning
Handlinger som påvirker innhold eller systemtilstand

Uegnet til

Navigasjon til nye sider uten at noe utføres — bruk lenke (<a>) i stedet
Handlinger som ikke er tilgjengelige eller ikke kan utføres
Visuell dekorasjon uten funksjon
For mange samtidige valg

Kom i gang

Result

Kode

Live Editor

<Button>Send inn</Button>

Eksempler

Varianter

primary er standardvarianten og bør brukes for den viktigste handlingen på siden. Unngå to primary-knapper ved siden av hverandre.

Result

Kode

Live Editor

<>
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="tertiary">Tertiary</Button>
</>

Fare

Bruk danger for destruktive handlinger som sletting eller avbryt-operasjoner der konsekvensen er vanskelig å reversere.

Result

Kode

Live Editor

<>
  <Button danger>Slett konto</Button>
  <Button variant="secondary" danger>Avbryt overføring</Button>
</>

Størrelser

Result

Kode

Live Editor

<>
  <Button size="sm">Liten</Button>
  <Button>Medium (standard)</Button>
  <Button size="lg">Stor</Button>
</>

Full bredde

Result

Kode

Live Editor

<Button width="full">Fortsett</Button>

Med ikon

Ikon-knapper med tekst trenger ingen ekstra ARIA — teksten er den tilgjengelige labelen. Plasser ikonet foran teksten.

Result

Kode

Live Editor

<Button>
  <Icon name="sparing" />
  Pålogget
</Button>

Ikonknapp (uten tekst)

Knapper med bare ikon må ha aria-label som beskriver handlingen.

Result

Kode

Live Editor

<Button aria-label="Gå til sparing">
  <Icon name="sparing" />
</Button>

Ikonknapp uten aria-label

En knapp med bare ikon og ingen aria-label er usynlig for skjermlesere. Brukeren hører bare "knapp" — ingen beskrivelse av hva den gjør.

Laster

Når en asynkron operasjon er i gang, sett loading og loadingLabel. Knappen deaktiveres for skjermlesere og loadingLabel annonseres.

Result

Kode

Live Editor

<Button loading loadingLabel="Sender inn…">
  Send inn
</Button>

Deaktivert

Result

Kode

Live Editor

<Button disabled>Deaktivert</Button>

Vurder om brukeren i stedet bør se en forklaring på hvorfor handlingen ikke er tilgjengelig. En disabled-knapp uten kontekst er forvirrende.

Som lenke

Bruk as="a" når knappen navigerer til en URL. Den beholder button-styling, men rendres som <a>.

Result

Kode

Live Editor

<Button as="a" href="https://www.sparebank1.no">
  Gå til sparebank1.no
</Button>

Retningslinjer

Bruk riktig komponent: handling vs. navigasjon

Knapper skal brukes når brukeren utfører en handling som påvirker systemet — som å lagre, sende eller bekrefte noe. Dersom brukeren kun skal navigere til en ny side uten at noe behandles, skal lenke brukes i stedet. Skillet er viktig både for brukerens forventninger og for tilgjengelighet.

Tydelig handling i label gir forutsigbarhet

Knappetekst skal beskrive hva som skjer når brukeren klikker. Den bør være handlingsorientert og konkret. "Lagre endringer" er tydeligere enn "OK", fordi den forklarer hva handlingen faktisk gjør.

Unngå generiske labels

Generiske tekster som "OK", "Send" eller "Neste" kan være uklare uten kontekst. Der det er mulig, bør teksten spesifisere hva som skjer — som "Send søknad" eller "Gå til betaling".

Teksten skal være kort og énlinjet

Knappetekst skal være kort og presis. Korte tekster gjør knapper lettere å skanne og sikrer at layouten holder seg stabil på tvers av skjermstørrelser.

Hierarki skaper struktur og prioritering

Knapper skal ha et tydelig visuelt hierarki som viser hva som er viktigst å gjøre:

Primærknapp — hovedhandlingen i en visning
Sekundærknapp — alternative handlinger
Tertiærknapp — mindre viktige eller støttende handlinger
Destruktiv knapp — handlinger som sletter eller endrer data permanent

Dersom en tertiær knapp brukes alene, skal den alltid kombineres med ikon. Dette sikrer at den fremstår som en handling og ikke forveksles med vanlig tekst.

Én primær handling per visning

Hver side eller seksjon bør ha én tydelig primær handling. Denne bør fremheves visuelt slik at det er klart hva brukeren skal gjøre videre. Flere primære knapper skaper konkurranse om oppmerksomheten og gjør det vanskeligere å ta en beslutning.

Plassering og rekkefølge påvirker valg

Når flere knapper plasseres ved siden av hverandre, skal primærknappen stå først. Et unntak er navigasjon mellom steg, som "Forrige" og "Neste" — der skal den sekundære knappen "Forrige" stå først. Dette samsvarer med brukerens forventning om retning og progresjon.

Ikonknapper krever ekstra tydelighet

Knapper som kun består av ikon er forbeholdt løsninger for mer erfarne brukere, siden handlingen ikke beskrives med tekst. Unntak kan gjøres for godt etablerte ikoner som lukk eller slett — men knappen må alltid ha en tilgjengelig tekst via aria-label.

Bekreft destruktive handlinger

Handlinger som sletter eller endrer data permanent bør enten kreve en ekstra bekreftelse (f.eks. en modal) eller tydelig merkes som destruktive med danger-prop.

Ikke bruk disabled uten forklaring

Disabled-knapper kan være vanskelig å forstå hvis det ikke er tydelig hvorfor de ikke kan brukes. Vurder om handlingen heller bør skjules, eller om det bør forklares hva som mangler for at knappen skal bli aktiv.

Tilpass bredde til innhold og kontekst

Knapper bør som hovedregel tilpasse seg innholdet sitt. Full bredde kan brukes der det gir mening — for eksempel på mobil — men bør brukes bevisst for å unngå at alle handlinger fremstår som like viktige.

Universell utforming

Hva du selv må sørge for

Ikonknapper må ha aria-label — knapper uten synlig tekst er meningsløse for skjermlesere uten en beskrivende label. Labelen skal beskrive handlingen, ikke ikonet: aria-label="Slett melding", ikke aria-label="Søppelkasse-ikon".
Gi loadingLabel ved loading-tilstand — uten denne er knappen anonym for skjermlesere mens den laster.
Unngå disabled som standard — disabled-knapper sier ikke brukeren hva som mangler. Der det er mulig, la knappen være aktiv og gi tydelig feilmelding ved innsending.
Bruk riktig element — bruk <button> (standard) for handlinger og as="a" / <a> for navigasjon. Ikke legg click-handlers på <div> eller <span>.
Ikke stol på farge alene — forskjeller mellom knappetyper må ikke kun kommuniseres med farge. Tekst og eventuelt ikon må også skille dem fra hverandre.
Gi tilbakemelding på handling — når en knapp aktiveres, skal brukeren få tydelig tilbakemelding. Bruk loading-tilstanden for asynkrone operasjoner for å hindre usikkerhet og gjentatte klikk.

Hva komponenten gjør automatisk

type="button" settes som standard så knappen ikke sender inn skjema utilsiktet.
aria-disabled="true" settes ved loading=true slik at skjermlesere vet at knappen midlertidig er utilgjengelig.
aria-label byttes til loadingLabel ved loading slik at skjermleser-brukere vet hva som skjer.
Fokusindikator via :focus-visible — synlig for tastaturbrukere, ikke for mus.

Tastaturnavigasjon

Tast	Handling
`Tab`	Flytter fokus til knappen
`Shift+Tab`	Flytter fokus til forrige fokuserbare element
`Enter`	Aktiverer knappen
`Space`	Aktiverer knappen

Skjermleser

Ved fokus: "[knappetekst], knapp"
Ikonknapp: "[aria-label], knapp"
Ved loading: "[loadingLabel], knapp, deaktivert"
Danger-variant: ingen ekstra annonsering — den visuelle fare-indikasjonen er ikke eksponert semantisk. Konteksten rundt knappen må forklare konsekvensen.

WCAG-kriterier

Sist gjennomgått: 2026-05-08 — alle 56 WCAG 2.2-kriterier vurdert

WCAG-kriterier11 ditt ansvar · 14 håndtert · 41 ikke relevant · 0 ikke på plass

Ditt ansvar (11)

Kriterium	Nivå	Hva du må gjøre
4.1.2 Navn, rolle, verdi	A	Sett aria-label på ikonknapper. En knapp med bare ikon og ingen synlig tekst er meningsløs for skjermlesere uten en beskrivende label. Bruk aria-label="Last opp vedlegg" direkte på knappen. Labelen skal beskrive handlingen, ikke ikonet.
2.4.6 Overskrifter og ledetekster	AA	Sett aria-label på ikonknapper. En knapp med bare ikon og ingen synlig tekst er meningsløs for skjermlesere uten en beskrivende label. Bruk aria-label="Last opp vedlegg" direkte på knappen. Labelen skal beskrive handlingen, ikke ikonet.
3.3.1 Identifikasjon av feil	A	Unngå disabled som standard — foretrekk tydelig feilmelding. Disabled-knapper sier ikke brukeren hva som mangler. Der det er mulig, la knappen være aktiv og gi tydelig feilmelding ved innsending. Hvis disabled brukes, sørg for at brukeren har fått forklart hvorfor.
3.3.3 Forslag ved feil	AA	Unngå disabled som standard — foretrekk tydelig feilmelding. Disabled-knapper sier ikke brukeren hva som mangler. Der det er mulig, la knappen være aktiv og gi tydelig feilmelding ved innsending. Hvis disabled brukes, sørg for at brukeren har fått forklart hvorfor.
4.1.2 Navn, rolle, verdi	A	Bruk semantisk HTML-element. Bruk standard <button> for handlinger og <a> (via as="a") for navigasjon. Ikke bruk <div> eller <span> som knapp — det bryter nativ tastaturnavigasjon og skjermleser-annonsering.
4.1.2 Navn, rolle, verdi	A	Gi loadingLabel ved loading-tilstand. Når loading=true vises loadingLabel som knappens innhold og aria-label. Uten loadingLabel er knappen anonym for skjermlesere under lasting. Bruk norsk tekst som «Sender inn…» eller «Laster…».
3.3.1 Identifikasjon av feil	A	Gi loadingLabel ved loading-tilstand. Når loading=true vises loadingLabel som knappens innhold og aria-label. Uten loadingLabel er knappen anonym for skjermlesere under lasting. Bruk norsk tekst som «Sender inn…» eller «Laster…».
1.3.3 Sensoriske egenskaper	A	Kombiner tertiærknapp alene med ikon. En tertiærknapp uten tekst og ikon kan forveksles med vanlig tekst. Dersom tertiærknapp brukes uten omgivende kontekst som tydelig viser at det er en handling, skal den alltid ha et ikon.
2.4.6 Overskrifter og ledetekster	AA	Kombiner tertiærknapp alene med ikon. En tertiærknapp uten tekst og ikon kan forveksles med vanlig tekst. Dersom tertiærknapp brukes uten omgivende kontekst som tydelig viser at det er en handling, skal den alltid ha et ikon.
3.3.4 Forhindring av feil (juridisk, økonomisk, data)	AA	Bekreft destruktive handlinger. Handlinger som sletter eller endrer data permanent bør enten kreve en ekstra bekreftelse (f.eks. en modal) eller tydelig merkes som destruktive med danger-prop. Ikke stol på at farge alene kommuniserer alvorlighetsgraden.
1.4.1 Bruk av farge	A	Bekreft destruktive handlinger. Handlinger som sletter eller endrer data permanent bør enten kreve en ekstra bekreftelse (f.eks. en modal) eller tydelig merkes som destruktive med danger-prop. Ikke stol på at farge alene kommuniserer alvorlighetsgraden.

Håndtert av komponenten (14)

Kriterium	Nivå	Hva komponenten gjør
1.3.1 Informasjon og relasjoner	A	Native <button>-element med implisitt rolle. Tekst-innhold gir tilgjengelig navn automatisk.
1.3.2 Meningsfull rekkefølge	A	Innholdet følger naturlig lekkefølge i DOM.
1.4.1 Bruk av farge	A	Danger-tilstand kommuniseres med fargeendring og semantisk klasse — ikke farge alene.
1.4.4 Endre tekststørrelse	AA	Relative enheter — skalerer korrekt ved 200 % zoom.
1.4.10 Omflyt	AA	Reflower korrekt ned til 320px viewport.
1.4.11 Kontrast for ikke-tekstlig innhold	AA	Fokusindikator oppfyller 3:1 kontrastkrav.
2.1.1 Tastatur	A	Native <button> aktiveres med Enter og Space. Fullt opererbart med tastatur.
2.1.2 Ingen tastaturfelle	A	Fokus kan navigeres ut med Tab og Shift+Tab.
2.4.3 Fokusrekkefølge	A	Følger naturlig tab-rekkefølge i DOM.
2.4.7 Synlig fokus	AA	Tydelig fokusindikator via :focus-visible med outline-token.
2.5.8 Målstørrelse (minimum)	AA	Minimumsstørrelse md oppfyller 24x24px klikkflate (padding + innhold).
3.2.1 Ved fokus	A	Fokus trigger ingen kontekstendring.
1.4.3 Kontrast (minimum)	AA	Tekst- og ikonfarge i alle varianter bruker --ix-color-component-button--foreground- tokens mot sine respektive fill-tokens. Disabled-tilstand (opacity: 0.4) er unntatt fra kravet per WCAG.
4.1.2 Navn, rolle, verdi	A	Native <button> med implisitt rolle=button. Tilgjengelig navn fra innhold eller aria-label. Native disabled settes ved loading.

Ikke relevant (41)

Kriterium	Nivå	Hvorfor ikke relevant
1.1.1 Ikke-tekstlig innhold	A	Knappen har ingen ikke-tekstlig innhold som bilder — ikon-barn er dekorativt og skjules med aria-hidden.
1.2.1 Bare lyd og bare video (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.2 Teksting (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.3 Synstolking eller mediealternativ (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.4 Teksting (direkte)	AA	Ingen medieelementer.
1.2.5 Synstolking (forhåndsinnspilt)	AA	Ingen medieelementer.
1.3.3 Sensoriske egenskaper	A	Knappen formidler ikke instruksjoner — den utfører en handling.
1.3.4 Visningsretning	AA	Ingen fast orientering — tilpasser seg visningsretning.
1.3.5 Identifiser formål med inndata	AA	Ikke et skjemafelt som ber om personlig informasjon.
1.4.2 Styring av lyd	A	Ingen lydelementer.
1.4.5 Bilder av tekst	AA	Ingen bilder av tekst.
1.4.12 Tekstavstand	AA
1.4.13 Innhold ved hover eller fokus	AA
2.1.4 Tastatursnarveier	A	Ingen egendefinerte tastatursnarveier.
2.2.1 Justerbar hastighet	A	Ingen tidsbegrensede funksjoner.
2.2.2 Pause, stopp, skjul	A	Ingen animasjon eller automatisk oppdatering.
2.3.1 Terskelverdi på tre glimt	A	Ingen blinkende eller glimtende innhold.
2.4.1 Hoppe over blokker	A	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.2 Sidetitler	A	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.4 Formål med lenke (i kontekst)	A	Lenkeknapper (as="a") må ha meningsfull tekst — det er konsumentens ansvar.
2.4.5 Flere måter	AA	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.6 Overskrifter og ledetekster	AA
2.4.11 Fokus ikke skjult (minimum)	AA	Ingen sticky/overlappende elementer som kan skjule fokus.
2.5.1 Pekerbevegelser	A	Ingen drag-and-drop eller sveipebevegelser.
2.5.2 Avbryt peker	A	Native button-element — nettleseren håndterer pekerinteraksjon.
2.5.4 Bevegelsesaktivering	A	Ingen bevegelsesbasert interaksjon.
2.5.6 Samtidige inndatamekanismer	A
2.5.7 Drabevegelser	A	Ingen drag-and-drop.
3.1.1 Språk på siden	A	Sidekrav — gjelder ikke enkeltkomponenter.
3.1.2 Språk på deler av innhold	AA	Komponenten setter ikke lang-attributt — innhold er på sidespråket.
3.2.2 Ved inndata	A	Knappen trigger ingen automatisk kontekstendring ved fokus.
3.2.3 Konsistent navigasjon	AA	Sidekrav — gjelder ikke enkeltkomponenter.
3.2.4 Konsistent identifikasjon	AA	Systemkrav — gjelder konsistens på tvers av sider, ikke enkeltkomponenter.
3.2.6 Konsistent hjelp	A	Sidekrav — gjelder plassering av hjelpefunksjon på tvers av sider.
3.3.1 Identifikasjon av feil	A
3.3.2 Ledetekster eller instruksjoner	A
3.3.3 Forslag ved feil	AA
3.3.4 Forhindring av feil (juridisk, økonomisk, data)	AA	Flytkrav — gjelder bekreftelse/reversering av transaksjoner, ikke enkeltfelter.
3.3.7 Redundant oppføring	A	Flytkrav — gjelder at brukeren ikke skal gjenta informasjon i en prosess.
3.3.8 Tilgjengelig autentisering (minimum)	AA	Ikke en autentiseringskomponent.
4.1.3 Statusmeldinger	AA	Knappen genererer ingen statusmeldinger selv.

Props / API

Prop	Type	Standard	Beskrivelse
`variant`	`'primary' \| 'secondary' \| 'tertiary'`	`'primary'`	Visuell variant
`danger`	`boolean`	`false`	Bruk fare-farger for destruktive handlinger
`loading`	`boolean`	`false`	Vis lasteindikator og deaktiver for skjermlesere
`loadingLabel`	`string`		Tekst vist og annonsert av skjermleser under lasting. Påkrevd når `loading=true`
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Størrelse
`width`	`'full' \| 'auto'`	`'auto'`	`'full'` strekker knappen til full bredde av forelderen
`as`	`ElementType`	`'button'`	Render som annet element, f.eks. `'a'` for lenke-knapper
`aria-label`	`string`		Skjult label for skjermlesere. Påkrevd for ikonknapper uten synlig tekst
`disabled`	`boolean`		Deaktiverer knappen helt (nativ HTML-attributt)

I tillegg støttes alle standard HTML-knapp-attributter (onClick, onFocus, type, form, name, value, tabIndex osv.) og settes direkte på <button>-elementet.

Tilpasning med CSS

Trenger du ix-button-stylingen på HTML du setter sammen selv — uten React-komponenten — kan du bruke klassene direkte.

Tilgjengelige klasser og data-attributter

Element/tilstand	Selektor / attributt
Knapp	`.ix-button`
Variant	`data-variant="primary"` / `"secondary"` / `"tertiary"`
Fare-tilstand	`data-danger="true"`
Liten størrelse	`data-size="sm"`
Stor størrelse	`data-size="lg"`
Full bredde	`.ix-w-full`

Eksempel: ren HTML

<button class="ix-button" data-variant="primary" type="button">
  Send inn
</button>

<a class="ix-button" data-variant="secondary" href="/tilbake">
  Avbryt
</a>

<button class="ix-button" data-variant="primary" data-danger="true" type="button">
  Slett konto
</button>

Relatert

Typografi — skriftstørrelser brukt i knapper
Spacing — padding-tokens for sm/md/lg
Farger — fargetokens for varianter og danger
Deaktiverte tilstander — retningslinjer for når disabled er riktig valg

Egnet til​

Uegnet til​

Kom i gang​

Eksempler​

Varianter​

Fare​

Størrelser​

Full bredde​

Med ikon​

Ikonknapp (uten tekst)​

Laster​

Deaktivert​

Som lenke​

Retningslinjer​

Bruk riktig komponent: handling vs. navigasjon​

Tydelig handling i label gir forutsigbarhet​

Unngå generiske labels​

Teksten skal være kort og énlinjet​

Hierarki skaper struktur og prioritering​

Én primær handling per visning​

Plassering og rekkefølge påvirker valg​

Ikonknapper krever ekstra tydelighet​

Bekreft destruktive handlinger​

Ikke bruk disabled uten forklaring​

Tilpass bredde til innhold og kontekst​

Universell utforming​

Hva du selv må sørge for​

Hva komponenten gjør automatisk​

Tastaturnavigasjon

Skjermleser

WCAG-kriterier​

Props / API​

Tilpasning med CSS​

Tilgjengelige klasser og data-attributter​

Eksempel: ren HTML​

Relatert​

Egnet til

Uegnet til

Kom i gang

Eksempler

Varianter

Fare

Størrelser

Full bredde

Med ikon

Ikonknapp (uten tekst)

Laster

Deaktivert

Som lenke

Retningslinjer

Bruk riktig komponent: handling vs. navigasjon

Tydelig handling i label gir forutsigbarhet

Unngå generiske labels

Teksten skal være kort og énlinjet

Hierarki skaper struktur og prioritering

Én primær handling per visning

Plassering og rekkefølge påvirker valg

Ikonknapper krever ekstra tydelighet

Bekreft destruktive handlinger

Ikke bruk disabled uten forklaring

Tilpass bredde til innhold og kontekst

Universell utforming

Hva du selv må sørge for

Hva komponenten gjør automatisk

WCAG-kriterier

Props / API

Tilpasning med CSS

Tilgjengelige klasser og data-attributter

Eksempel: ren HTML

Relatert