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
Bruk
Eksempler
Varianter
primary er standardvarianten og bør brukes for den viktigste handlingen på siden. Unngå to primary-knapper ved siden av hverandre.
Fare
Bruk danger for destruktive handlinger som sletting eller avbryt-operasjoner der konsekvensen er vanskelig å reversere.
Størrelser
Full bredde
Med ikon
Ikon-knapper med tekst trenger ingen ekstra ARIA — teksten er den tilgjengelige labelen. Plasser ikonet foran teksten.
Ikonknapp (uten tekst)
Knapper med bare ikon må ha aria-label som beskriver handlingen. Bruk iconOnly for å gjøre knappen rund.
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, en spinner vises, og loadingLabel annonseres til skjermleseren.
I React erstattes children (inkludert ikon) automatisk med spinner og loadingLabel. I HTML må du selv erstatte innholdet og sette disabled + data-loading="true".
Spinneren arver knappens tekstfarge, så den får riktig kontrast i alle varianter — også på fylt primary-bakgrunn.
Deaktivert
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>.
Varianter, størrelser og ikoner virker likt på lenke-knapper. Merk at type ikke settes når
komponenten rendrer et anker — attributtet er kun gyldig på <button>.
Retningslinjer
Bruk knapp til handling, lenke til navigasjon
En knapp gjør noe: lagrer, sender, bekrefter. En lenke flytter brukeren et annet sted. Ser de like ut, gjetter brukeren, og skjermleseren annonserer feil type element.
Skriv hva knappen gjør
"Lagre endringer" er tydeligere enn "OK", og "Send søknad" tydeligere enn "Send". Teksten skal kunne leses alene, uten hjelp fra det som står rundt: en skjermleserbruker som navigerer mellom knapper hører bare labelen.
Hold den samtidig kort nok til å stå på én linje. To ord er ofte nok, og da holder også layouten seg stabil på smale skjermer.
Bruk hierarkiet til å vise hva som er viktigst
Knappene har fire nivåer, og de er der for å prioritere:
| Nivå | Brukes til |
|---|---|
| Primær | hovedhandlingen i visningen |
| Sekundær | alternative handlinger |
| Tertiær | støttende handlinger av mindre betydning |
| Destruktiv | sletting og andre endringer som ikke kan angres |
Står en tertiærknapp alene, gi den et ikon. Uten ikon ser den ut som vanlig tekst, og folk oppdager ikke at den kan trykkes.
Bruk én primærknapp per visning
Én knapp skal svare på "hva gjør jeg nå?". Er det to primærknapper på samme skjerm, konkurrerer de, og brukeren må ta et valg du egentlig kunne tatt selv.
Plasser primærknappen først
Ligger flere knapper på rad, kommer primærknappen først. Unntaket er stegvis navigasjon: der står "Forrige" til venstre for "Neste", fordi rekkefølgen følger retningen brukeren beveger seg i.
Gi ikonknapper en aria-label
En knapp med bare ikon sier ingenting til en skjermleser før du gir den aria-label. Selv
med labelen på plass krever den at brukeren kjenner ikonet, så hold deg til de innarbeidede
(lukk, slett, rediger) eller sett tekst på knappen.
Bekreft destruktive handlinger
Sletting og andre endringer som ikke kan angres, skal enten bekreftes i en
Modal eller merkes med danger-prop. Helst begge: fargen varsler, dialogen
stopper.
Ikke bruk disabled uten forklaring
En grå knapp uten forklaring er en blindvei. Skriv hva som mangler for at den skal bli aktiv, eller skjul handlingen til den er relevant.
Tilpass bredden til innholdet
Knapper følger teksten sin. Full bredde er nyttig i mobile skjemaer og modaler, men brukt overalt gjør det at alle handlinger ser like viktige ut.
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", ikkearia-label="Søppelkasse-ikon". - Gi
loadingLabelved 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:
<button>(standard) for handlinger ogas="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.disabledsettes vedloading=trueslik at knappen ikke kan aktiveres mens operasjonen pågår.aria-labelbyttes tilloadingLabelved loading slik at skjermleser-brukere vet hva som skjer.- Spinner rendres automatisk ved
loading=trueog erstatter eventuelle ikoner. - 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-29 — 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 24×24 px klikkflate. iconOnly bruker aspect-ratio: 1/1 og lik padding på alle sider — klikkflaten er alltid kvadratisk. |
| 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 |
iconOnly | boolean | false | Gjør knappen rund — bruk kun når innholdet er et enkelt ikon. Krever aria-label |
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 selektorer
| 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 |
| Ikonknapp (rund) | data-icon-only |
| Laster | data-loading="true" + disabled (innhold må erstattes med <span class="ix-spinner"> + tekst) |
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>
<button class="ix-button" data-variant="secondary" data-icon-only type="button" aria-label="Slett">
<!-- ix-icon her -->
</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