Knapp (Button)

Eksempler på ulike typer

Primær

Sekundær

Tertiær

Bruk knapp heller enn lenke når brukeren skal utføre en handling eller endrer tilstand i tjenesten. Eksempler på dette kan være: Lagre, logg inn, send inn, publiser, sidebytte (paginering).

Noen ganger kan det være konflikt mellom hva som skjer rent teknisk og hva brukeren opplever, da er det brukerens oppleve som skal følges.

Noen unntak

Ett unntak her er ved bruk av faner - her er det tillatt å bruke fane-navigering som ikke er knapper, ettersom dette er et etablert interaksjonsmønster.

I tilfeller hvor det er mange valg, eksempelvis ved endring av språk kan også gjøres med en nedtrekksmeny.

Primærknapp

Begrens bruk av primærknapp til en knapp per side som er hovedaksjonen for siden.

Vurder hva som er de viktigste aksjonene, og la disse få mest oppmerksomhet.

Oppmerksomhet

Farger i Attention farge (rød) bør primært brukes til aksjoner som er ikke brukeren kan angre handlingen sin. Eksempelvis Slett etc.

Brukes veldig sparsommelig.

Disabled

Bør unngås. Brukeren bør kunne trykke på en aktiv knapp, som løser ut en tilbakemelding til brukeren om hva som mangler før hen eksempelvis kan gå videre.

Knappetekst

Bruk tekst på knapper så langt det lar seg gjøre. Teksten skal være kort og beskrivende for aksjonen. Helst to og maks tre ord.

For etablerte konvensjoner (eks. X for å lukke), eller knapper som opptrer flere ganger i samme skjermbilde kan man bruke en knapp med kun ikon. Det samme gjelder knapperekker som er å anse som “verktøylinjer” hvor det er behov for å være plasseffektiv.

<adb-button> er en Web Component som fungerer i alle rammeverk. Internt bruker den et semantisk korrekt <button>-element, som gir tastaturnavigasjon og skjermleserstøtte gratis.

Varianter

Tre visuelle vektnivåer × to fargeroller:

Primary

Accent

Slett konto

Secondary

Accent

Avbryt sletting

Tertiary

Nøytral

Størrelser

Liten

Medium

Stor

Med ikon

Bruk icon-start-sloten for ikon foran tekst, og icon-end-sloten for ikon bak tekst.

Ikon foran (icon-start)

Søk

Ikon bak (icon-end)

Les mer

<adb-button variant="primary">
  <adb-icon slot="icon-start" name="search"></adb-icon>
  Søk
</adb-button>

<adb-button variant="secondary">
  Les mer
  <adb-icon slot="icon-end" name="open-in-new"></adb-icon>
</adb-button>

For knapper som kun inneholder et ikon (ingen tekst), bruk <adb-icon-button> i stedet.

Deaktiverte knapper

Primary

Secondary

Tertiary

Deaktiverte knapper fjernes fra tab-rekkefølgen (native disabled). Bruk disabled bare når årsaken er synlig i konteksten — ellers kan brukere bli forvirret over hvorfor knappen ikke kan aktiveres.

Bruk

Vanlig handling

<adb-button variant="primary" color="accent">Lagre endringer</adb-button>
<adb-button variant="secondary" color="accent">Avbryt</adb-button>

Destruktiv handling

Bruk alltid beskrivende tekst på danger-knapper — ikke bare «Bekreft». Fargen alene er ikke tilstrekkelig (WCAG 1.4.1).

<!-- ✅ Riktig: teksten beskriver handlingen -->
<adb-button variant="primary" color="danger">Slett konto</adb-button>

<!-- ❌ Feil: teksten gir ingen kontekst -->
<adb-button variant="primary" color="danger">Bekreft</adb-button>

I skjemaer

<form>
  <adb-button type="submit">Send inn</adb-button>
  <adb-button type="reset" variant="tertiary">Tilbakestill</adb-button>
</form>

Disclosure / toggle (aria-controls + aria-expanded)

Bruk aria-controls og aria-expanded for knapper som åpner/lukker innhold — f.eks. dropdown-menyer, accordion-paneler eller sidepaneler.

<adb-button
  aria-controls="filter-panel"
  aria-expanded="false"
  variant="secondary"
>Vis filtre</adb-button>

<div id="filter-panel" hidden>
  <!-- Filterinnhold -->
</div>

Attributtene videresendes til det indre <button>- eller <a>-elementet, slik at skjermlesere korrekt annonserer relasjonen.

API

Attributt	Type	Standard	Beskrivelse
`variant`	`primary \| secondary \| tertiary`	`primary`	Visuell vekt
`color`	`accent \| danger`	`accent`	Fargebruk. Ignoreres av `tertiary`.
`size`	`sm \| md \| lg`	`md`	Størrelse
`disabled`	`boolean`	`false`	Deaktiverer knappen og fjerner den fra tab-rekkefølgen
`type`	`button \| submit \| reset`	`button`	Native `type`-attributt. Ignoreres når `href` er satt.
`href`	`string`	—	Når satt, rendres et `<a>`-element i stedet for `<button>`
`target`	`_self \| _blank \| _parent \| _top`	—	Lenke-mål. Kun brukt med `href`.
`download`	`string`	—	Filnavn for nedlasting. Kun brukt med `href`.
`rel`	`string`	—	Lenkerelasjoner. Automatisk `noopener noreferrer` ved `target="_blank"`.
`aria-label`	`string`	—	Påkrevd når knappen kun inneholder ikon
`aria-controls`	`string`	—	ID-en til elementet knappen styrer (f.eks. dropdown, accordion)
`aria-expanded`	`'true' \| 'false'`	—	Om det kontrollerte elementet er åpent — for disclosure-mønstre

Slots

Slot	Beskrivelse
(standard)	Knappetext
`icon-start`	Ikon før teksten
`icon-end`	Ikon etter teksten

CSS Parts

Bruk ::part(base) for å overstyre stiler utenfra shadow DOM:

adb-button::part(base) {
  letter-spacing: 0.05em;
}

Universell utforming (WCAG 2.1 AA)

Semantikk

Komponenten rendrer alltid et native <button>-element i shadow DOM. Dette betyr at:

Rollen button er automatisk eksponert til hjelpemidler
Enter og Space aktiverer knappen uten ekstra kode
disabled-attributtet kommuniseres til skjermlesere som «utilgjengelig» eller «deaktivert»

Tastaturnavigasjon

Tast	Handling
`Tab`	Flytt fokus til knappen
`Shift + Tab`	Flytt fokus tilbake
`Enter`	Aktiver knappen
`Space`	Aktiver knappen

Fokusindikator

Fokusringen er implementert etter WCAG 2.4.7 og 2.4.11:

3 px ytre outline (#262F31 — høy kontrast)
2 px offset + 5 px hvit boks-skygge for synlighet mot alle bakgrunner
Vises kun ved tastaturnavigasjon (focus-visible) — ikke ved museklikk

button:focus-visible {
  outline: 3px solid var(--adb-focus-outer, #262F31);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--adb-focus-inner, #FFFFFF);
}

Fargekontrast

Alle varianter oppfyller WCAG 1.4.3 (tekst, AA) og 1.4.11 (UI-komponenter, AA):

Variant	Forgrunnsfarge	Bakgrunnsfarge	Kontrast	Status
Primary accent	`#FFFFFF`	`#005A71`	5,2:1	✅ AA
Primary danger	`#FFFFFF`	`#B80738`	6,8:1	✅ AA
Secondary accent (tekst)	`#005A71`	`#FFFFFF`	5,2:1	✅ AA
Secondary accent (kant)	`#005A71`	`#FFFFFF`	5,2:1	✅ AA (≥3:1)
Secondary danger (tekst)	`#9A0024`	`#FFFFFF`	8,7:1	✅ AA
Secondary danger (kant)	`#B80738`	`#FFFFFF`	6,8:1	✅ AA (≥3:1)
Tertiary	`#262F31`	`#D2DDE0`	9,9:1	✅ AA

Berøringsflatestørrelse

Størrelse	Høyde (ca.)	WCAG 2.5.5 (AAA)	Anbefaling
`sm`	~29 px	❌ Under 44 px	Kun til kompakte grensesnitt
`md`	~40 px	❌ Under 44 px	Standard — tilstrekkelig i praksis
`lg`	~52 px	✅ Over 44 px	Bruk på mobil og i skjemaer

Merk: WCAG 2.1 AA krever ikke 44 px (det er AAA). Men det er god praksis på mobil. Bruk lg i touch-kontekster.

Deaktiverte knapper

disabled-attributtet setter både native HTML disabled og aria-disabled="true". Dette betyr:

Knappen fjernes fra tab-rekkefølgen (kan ikke nås med Tab)
Skjermlesere annonserer den som «utilgjengelig»

Bruk disabled kun når årsaken er synlig — f.eks. et skjema med ugyldig input der valideringsfeilen er synlig. Hvis brukeren ikke forstår hvorfor knappen er deaktivert, er det bedre å la den være aktiv og gi en feilmelding ved klikk.

Fargebruk og `danger`

color="danger" bruker rød farge for å signalisere en destruktiv handling. Rød farge alene er ikke tilstrekkelig — det er en brudd på WCAG 1.4.1 (fargebruk). Alltid bruk beskrivende knappetext som kommuniserer handlingen, f.eks. «Slett konto» fremfor «Bekreft».

WCAG-kriterier

Kriterium	Nivå	Oppfylt	Merknad
1.1.1 Ikke-tekstlig innhold	A	✅	`aria-label` støttes for ikonknapper
1.3.1 Informasjon og relasjoner	A	✅	Native `<button>` — semantisk korrekt
1.4.1 Bruk av farge	A	⚠️	`danger` bruker farge — teksten må beskrive handlingen
1.4.3 Kontrast (minimum)	AA	✅	Alle varianter ≥4,5:1
1.4.11 Kontrast for ikke-tekstlig innhold	AA	✅	Kanter og fokusring ≥3:1
2.1.1 Tastatur	A	✅	Native `<button>` — Enter og Space fungerer
2.4.7 Fokus synlig	AA	✅	3 px fokusring ved `focus-visible`
2.5.3 Etikett i navn	A	✅	Synlig tekst = tilgjengelig navn
4.1.2 Navn, rolle, verdi	A	✅	Rolle: `button`, tilstand: `aria-disabled`

Knapp (Button)

Noen unntak

Primærknapp

Oppmerksomhet

Disabled

Knappetekst

Varianter

Størrelser

Med ikon

Deaktiverte knapper

Bruk

Vanlig handling

Destruktiv handling

I skjemaer

Disclosure / toggle (aria-controls + aria-expanded)

API

Slots

CSS Parts

Universell utforming (WCAG 2.1 AA)

Semantikk

Tastaturnavigasjon

Fokusindikator

Fargekontrast

Berøringsflatestørrelse

Deaktiverte knapper

Fargebruk og danger

WCAG-kriterier

Fargebruk og `danger`