Button chip

En button chip fungerer som en knapp og trigger en handling — for eksempel et hurtigvalg, et forslag eller et filter brukeren aktiverer. Den har ingen vedvarende valgt tilstand.

Kom i gang

Result

Loading...

Kode

Live Editor

<button class="ix-chip" type="button">
  Chip label
</button>

Result

Loading...

Kode

Live Editor

<Chip>Chip label</Chip>

Eksempler

Gruppe

Button chips gir mest verdi i grupper. Da blir det tydelig at de hører sammen og at det finnes flere valg.

Result

Loading...

Kode

Live Editor

<div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--ix-spacing-sm)' }}>
  <button class="ix-chip" type="button">Alle</button>
  <button class="ix-chip" type="button">Sparing</button>
  <button class="ix-chip" type="button">Lån</button>
  <button class="ix-chip" type="button">Forsikring</button>
</div>

Result

Loading...

Kode

Live Editor

<div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--ix-spacing-sm)' }}>
  <Chip>Alle</Chip>
  <Chip>Sparing</Chip>
  <Chip>Lån</Chip>
  <Chip>Forsikring</Chip>
</div>

Størrelser

Chip finnes i to størrelser: md (standard) og sm.

Result

Loading...

Kode

Live Editor

<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--ix-spacing-sm)' }}>
  <button class="ix-chip" data-size="sm" type="button">Small</button>
  <button class="ix-chip" type="button">Medium (standard)</button>
</div>

Result

Loading...

Kode

Live Editor

<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--ix-spacing-sm)' }}>
  <Chip size="sm">Small</Chip>
  <Chip>Medium (standard)</Chip>
</div>

Deaktivert

Result

Loading...

Kode

Live Editor

<button class="ix-chip" type="button" disabled>
  Chip label
</button>

Result

Loading...

Kode

Live Editor

<Chip disabled>Chip label</Chip>

Vurder om brukeren i stedet bør se en forklaring på hvorfor valget ikke er tilgjengelig.

Som lenke

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

Result

Loading...

Kode

Live Editor

<a class="ix-chip" href="https://www.sparebank1.no">
  Gå til sparebank1.no
</a>

Result

Loading...

Kode

Live Editor

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

Universell utforming

Hva du selv må sørge for

• Gi chipen en kort og tydelig label — teksten er det tilgjengelige navnet. Den skal beskrive handlingen.
• Bruk chips i grupper — en enkeltstående chip gir lite kontekst. Presenter relaterte chips sammen.
• Bruk riktig element — <button> (standard) for handlinger og as="a" / <a> for navigasjon. Ikke legg click-handlers på <div> eller <span>.
• Ikke stol på farge alene — teksten må alltid være den primære informasjonsbæreren.
• Unngå disabled som standard — en disabled chip sier ikke hva som mangler. La heller chipen være aktiv og forklar konteksten.

Hva komponenten gjør automatisk

• type="button" settes som standard på <button>-elementer så chipen ikke sender inn skjema utilsiktet.
• Tilgjengelig navn hentes fra tekst-innholdet i chipen.
• Fokusindikator via :focus-visible — synlig for tastaturbrukere, ikke for mus.
• Tilstand med fyll og kant — hover og active kommuniseres med mer enn farge.

Tastaturnavigasjon

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

Skjermleser

• Ved fokus: "[chip-tekst], knapp"
• Som lenke (as="a"): "[chip-tekst], lenke"
• Deaktivert: "[chip-tekst], knapp, deaktivert"

WCAG-kriterier

Sist gjennomgått: 2026-06-29 — alle 56 WCAG 2.2-kriterier vurdert

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

Ditt ansvar (6)

Kriterium	Nivå	Hva du må gjøre
2.4.6 Overskrifter og ledetekster	AA	Gi chipen en kort og tydelig label. Teksten i chipen er det tilgjengelige navnet. Den skal være kort og beskrive handlingen — f.eks. «Vis flere» eller «Sparing». Unngå lange tekster; chips er ment for raske valg, ikke forklaringer.
1.3.1 Informasjon og relasjoner	A	Gi chipen en kort og tydelig label. Teksten i chipen er det tilgjengelige navnet. Den skal være kort og beskrive handlingen — f.eks. «Vis flere» eller «Sparing». Unngå lange tekster; chips er ment for raske valg, ikke forklaringer.
1.3.1 Informasjon og relasjoner	A	Bruk chips i grupper, ikke alene. En enkeltstående chip gir lite mening for brukeren. Presenter button chips sammen i en gruppe slik at det er tydelig at de hører sammen og at det finnes flere valg. Enkeltstående bruk er primært aktuelt for å trigge én handling.
1.4.1 Bruk av farge	A	Ikke stol på farge alene for å skille chips. Forskjeller mellom chips må ikke kun kommuniseres med farge. Teksten må alltid være den primære informasjonsbæreren. Bruk ev. ikon som støtte — ikke som erstatning for tekst.
4.1.2 Navn, rolle, verdi	A	Bruk semantisk element basert på funksjon. Button chip skal være et <button>-element (standard) eller <a> (via as="a") når den navigerer. Ikke bruk <div> eller <span> som chip — det bryter nativ tastaturnavigasjon og skjermleser-annonsering. Button chip trigger en handling og skal ikke ha vedvarende valgt tilstand.
3.3.1 Identifikasjon av feil	A	Unngå disabled som standard. En disabled chip forteller ikke brukeren hva som mangler. Der det er mulig, la chipen være aktiv og forklar i konteksten hvorfor et valg ev. ikke er tilgjengelig.

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 lesrekkefølge i DOM.
1.4.1 Bruk av farge	A	Tilstand (hover/active) kommuniseres med fyll og kant i tillegg til farge — 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.
3.2.1 Ved fokus	A	Fokus trigger ingen kontekstendring.
1.4.3 Kontrast (minimum)	AA	Tekstfarge bruker --ix-color-foreground-main-default mot fill-main-tokens i alle interaksjonstilstander. Disabled-tilstand (opacity: 0.4) er unntatt fra kravet per WCAG.
2.5.8 Målstørrelse (minimum)	AA	md-størrelsen (padding-block spacing-xs + font-size-md) gir klikkflate godt over 24×24px. sm-størrelsen (padding-block spacing-2xs + font-size-sm) er nær minimumet; chips presenteres i grupper med gap (spacing) mellom seg, slik at avstands-unntaket i SC 2.5.8 gjelder. Konsumenten må unngå å pakke sm-chips så tett at både mål og avstand kommer under 24px.
4.1.2 Navn, rolle, verdi	A	Native <button> med implisitt rolle=button og navn fra tekst-innhold. Native disabled-attributt eksponeres til hjelpemidler.

Ikke relevant (41)

Kriterium	Nivå	Hvorfor ikke relevant
1.1.1 Ikke-tekstlig innhold	A	Chipen har ingen ikke-tekstlig innhold som bilder — ev. ikon 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	Chipen 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	Lenke-chips (as="a") må ha meningsfull tekst — det er konsumentens ansvar.
2.4.5 Flere måter	AA	Sidekrav — gjelder ikke enkeltkomponenter.
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.3 Label i navn	A	Den synlige label-teksten er det tilgjengelige navnet.
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	Chipen 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	Button chip genererer ingen statusmeldinger selv.

Props / API

Chip

Prop	Type	Standard	Beskrivelse
size	'sm' | 'md'	'md'	Størrelse
as	ElementType	'button'	Render som annet element, f.eks. 'a' for lenke-chips
disabled	boolean		Deaktiverer chipen (nativ HTML-attributt)

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

Tilpasning med CSS

Trenger du button chip-stylingen på HTML du setter sammen selv, kan du bruke .ix-chip-klassen direkte på elementene dine.

Tilgjengelige klasser og attributter

Element/tilstand	Selektor / attributt
Chip	.ix-chip
Liten størrelse	data-size="sm"
Hover / active	:hover / :active (automatisk)
Fokus	:focus-visible (automatisk)
Deaktivert	disabled eller aria-disabled="true"

Eksempel: ren HTML

<button class="ix-chip" type="button">
  Chip label
</button>

<button class="ix-chip" data-size="sm" type="button">
  Liten chip
</button>

<a class="ix-chip" href="/sparing">
  Sparing
</a>

Relatert

• Chip — oversikt over chip-familien og felles retningslinjer
• Removable chip — chip som representerer et aktivt valg og kan fjernes
• Radio chip — gruppe der brukeren velger nøyaktig ett alternativ
• Button — for primære og sekundære handlinger i en visning