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.
Bruk
Laster...
Eksempler
Gruppe
Button chips gir mest verdi i grupper. Da blir det tydelig at de hører sammen og at det finnes flere valg.
Laster...
Størrelser
Chip finnes i to størrelser: md (standard) og sm.
Laster...
Deaktivert
Laster...
Vurder om brukeren i stedet bør se en forklaring på hvorfor valget ikke er tilgjengelig.
Feilmelding og skrivebeskyttet
error gir chipen rød kant og fjerner fyllet, så flaten blir gjennomsiktig og tar fargen fra det chipen ligger på. readOnly gir en nedtonet grå flate uten klikkrespons. Chipen beholder tab-fokus, så innholdet kan fortsatt leses opp. Er begge satt, vinner error.
En rød kant alene forteller ikke brukeren hva som er galt. Vis alltid en feilmelding i tekst ved siden av chipene.
Laster...
Som lenke
Bruk as="a" når chipen navigerer til en URL. Den beholder chip-styling, men rendres som <a>.
Laster...
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 ogas="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-kriterier8 ditt ansvar · 13 håndtert · 39 ikke relevant · 1 ikke på plass
Ditt ansvar (8)
| 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. |
| 3.3.1 Identifikasjon av feil | A | Vis feiltilstand med tekst, ikke bare rød kant. error gir chipen rød kant (mørkerødt fyll på en removable chip), men chipen har ingen egen feilmelding. Du må selv vise en tekst ved siden av chipene som identifiserer feilen og forklarer hva brukeren skal gjøre, og koble den til chipene med aria-describedby. Uten det er fargen den eneste beskjeden, og en skjermleserbruker får ingen. |
| 3.3.3 Forslag ved feil | AA | Vis feiltilstand med tekst, ikke bare rød kant. error gir chipen rød kant (mørkerødt fyll på en removable chip), men chipen har ingen egen feilmelding. Du må selv vise en tekst ved siden av chipene som identifiserer feilen og forklarer hva brukeren skal gjøre, og koble den til chipene med aria-describedby. Uten det er fargen den eneste beskjeden, og en skjermleserbruker får ingen. |
Håndtert av komponenten (13)
| 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. Feiltilstand bæres av kant og box-shadow, skrivebeskyttet av nedtonet fyll og forgrunn. En frittstående chip har ingen feilmelding, så konsumenten må vise feilen som tekst — kanten alene er nettopp 1.4.1-fella. |
| 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. |
| 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. I feiltilstand står invertert forgrunn mot fill-danger-default (ca. 5,5:1), og skrivebeskyttet foreground-main-read-only mot fill-interactive-read-only (ca. 4,6:1) — begge over 4,5:1, men read-only har liten margin. |
| 2.5.8 Målstørrelse (minimum) | AA | Med standard tetthet er md-størrelsen 36px høy, godt over 24×24px, og sm 26px. Med kompakt tetthet faller sm til 22px, altså under 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 (39)
| 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.2 Ledetekster eller instruksjoner | A | |
| 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. |
Ikke på plass (1)
| Kriterium | Nivå | Hva som mangler |
|---|---|---|
| 1.4.11 Kontrast for ikke-tekstlig innhold | AA | Kanten på en uvalgt chip i feiltilstand har for lav kontrast. Feilkanten bruker --ix-color-border-danger-default (#f9807d), som gir ca. 2,5:1 mot en lys bakgrunn — under kravet på 3:1 for ikke-tekstlige indikatorer. En uvalgt chip i feiltilstand har ikke eget fyll, så kanten måles mot flaten chipen ligger på. Tokenet er hus-standard for feilkant i TextField, TextArea, Select og Checkbox, så avviket er felles for alle fem komponentene og gjennomgås separat. Det som oppfyller 3:1, er fokusindikatoren, indikator-kanten og fyllet på en valgt chip i feiltilstand. Feilen formidles heller aldri av kanten alene: en valgt chip får mørkerødt fyll med invertert forgrunn, og feilmeldingen vises som tekst med ikon. |
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) | |
error | boolean | Viser chipen i feiltilstand med rød kant og gjennomsiktig flate. Slår readOnly | |
readOnly | boolean | Nedtonet grå flate, ingen klikkrespons. Setter aria-disabled |
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 selektorer
| 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" |
| Feilmelding | data-state="error" eller aria-invalid="true" |
| Skrivebeskyttet | data-state="readonly" |
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