InteractiveIcon
InteractiveIcon er en klikkbar ikon-flate — en kompakt knapp som bare viser et ikon. Den gir tydelig visuell tilbakemelding ved pekehvil, trykk og fokus, med en fargetone som kan styres av en status.
Egnet til
- Kompakte handlinger der et ikon er nok til å forklare hva som skjer (rediger, slett, lukk)
- Verktøylinjer og rader der plassen er knapp
- Handlinger som gjentas mange ganger og der etablerte ikoner er godt forstått
Uegnet til
- Primære handlinger i en visning — bruk en knapp med tekst
- Handlinger der ikonet alene er tvetydig — bruk en knapp med synlig tekst
- Navigasjon til en ny side uten at noe utføres — bruk en lenke
Kom i gang
En InteractiveIcon må alltid ha en tilgjengelig label som beskriver handlingen.
Result
Loading...
Kode
Live Editor
<InteractiveIcon name="rediger" aria-label="Rediger" />
Eksempler
Statuser
status styrer fargetonen som vises ved pekehvil og trykk. default bruker en nøytral farge; info, success, warning og danger gir hver sin status-farge. Fargen er kun en visuell forsterkning — handlingen må fremgå av aria-label.
Result
Loading...
Kode
Live Editor
<> <InteractiveIcon name="hjem" aria-label="Standard" /> <InteractiveIcon name="info" aria-label="Info" status="info" /> <InteractiveIcon name="hake" aria-label="Suksess" status="success" /> <InteractiveIcon name="utropstegn" aria-label="Advarsel" status="warning" /> <InteractiveIcon name="slett" aria-label="Slett" status="danger" /> </>
Størrelser
size følger ikonets størrelsesskala (sm, md, lg, xl). Klikkflaten holder seg minst 44×44 px uansett ikonstørrelse.
Result
Loading...
Kode
Live Editor
<> <InteractiveIcon name="rediger" aria-label="Liten" size="sm" /> <InteractiveIcon name="rediger" aria-label="Medium" /> <InteractiveIcon name="rediger" aria-label="Stor" size="lg" /> <InteractiveIcon name="rediger" aria-label="Ekstra stor" size="xl" /> </>
Med tooltip
Tooltip kan brukes for å gi ekstra kontekst til handlingen, spesielt når ikonets betydning ikke er åpenbar. For velkjente ikoner i en tydelig kontekst, som «Lukk» i en modal, er tooltip vanligvis ikke nødvendig. Komponenten skal alltid ha et tilgjengelig navn for skjermlesere — aria-label er påkrevd uavhengig av om det finnes en tooltip.
Result
Loading...
Kode
Live Editor
<InteractiveIcon name="rediger" aria-label="Rediger" data-tooltip="Rediger profil" />
Tooltip-teksten er ren tekst og må, som aria-label, sendes inn på brukerens språk (i18n).
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.
Universell utforming
Hva du selv må sørge for
aria-labeler påkrevd — beskriv handlingen, ikke ikonet:aria-label="Slett melding", ikkearia-label="Søppelkasse-ikon". Det finnes ingen hardkodet fallback; send inn riktig tekst for brukerens språk.- Ikke stol på farge alene —
status-fargen vises bare ved pekehvil/trykk og eksponeres ikke for skjermlesere. Har status betydning, må det fremgå avaria-labeleller konteksten rundt. - Bekreft destruktive handlinger — når
status="danger"brukes for sletting eller andre irreversible handlinger, bør handlingen kreve en ekstra bekreftelse.
Hva komponenten gjør automatisk
- Native
<button>— gir tastaturstøtte (Enter/Space), fokuserbarhet og rolle uten ekstra ARIA. type="button"settes som standard så knappen ikke sender inn skjema utilsiktet.- Ikonet er
aria-hidden— knappens navn kommer utelukkende fraaria-label, så skjermlesere annonserer ikke ikonet to ganger. - Klikkflate ≥ 44×44 px via
min-width/min-height— godt over WCAG-minstekravet på 24×24 px. - Fokusindikator via
:focus-visible— synlig for tastaturbrukere, ikke for mus. Samme fokusstil uavhengig av status.
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: "[aria-label], knapp"
- Status-variant: ingen ekstra annonsering — status-fargen er kun visuell. Konteksten rundt knappen må forklare betydningen.
WCAG-kriterier
Sist gjennomgått: 2026-06-26 — alle 56 WCAG 2.2-kriterier vurdert
WCAG-kriterier4 ditt ansvar · 11 håndtert · 44 ikke relevant · 0 ikke på plass
Ditt ansvar (4)
| Kriterium | Nivå | Hva du må gjøre |
|---|---|---|
| 4.1.2 Navn, rolle, verdi | A | Sett aria-label som beskriver handlingen. InteractiveIcon har bare et ikon og ingen synlig tekst. Uten aria-label er knappen meningsløs for skjermlesere. Labelen skal beskrive handlingen, ikke ikonet: aria-label="Rediger profil", ikke aria-label="Blyant-ikon". aria-label er påkrevd og har ingen hardkodet fallback — konsumenten må sende inn riktig tekst for brukerens språk (bokmål, nynorsk, engelsk). |
| 2.4.6 Overskrifter og ledetekster | AA | Sett aria-label som beskriver handlingen. InteractiveIcon har bare et ikon og ingen synlig tekst. Uten aria-label er knappen meningsløs for skjermlesere. Labelen skal beskrive handlingen, ikke ikonet: aria-label="Rediger profil", ikke aria-label="Blyant-ikon". aria-label er påkrevd og har ingen hardkodet fallback — konsumenten må sende inn riktig tekst for brukerens språk (bokmål, nynorsk, engelsk). |
| 1.4.1 Bruk av farge | A | Ikke bruk farge alene til å formidle status. status-fargen (info/success/warning/danger) er kun en visuell forsterkning som vises ved hover/pressed. Den eksponeres ikke semantisk for skjermlesere. Hvis status har betydning for handlingen, må det også fremgå av aria-label eller kontekst rundt knappen. |
| 3.3.4 Forhindring av feil (juridisk, økonomisk, data) | AA | Bekreft destruktive handlinger. Når status="danger" brukes for handlinger som sletter eller endrer data permanent, bør handlingen kreve en ekstra bekreftelse (f.eks. en modal). Ikke stol på at fargen alene kommuniserer alvorlighetsgraden. |
Håndtert av komponenten (11)
| Kriterium | Nivå | Hva komponenten gjør |
|---|---|---|
| 1.3.1 Informasjon og relasjoner | A | Native <button>-element med implisitt rolle=button. aria-label gir tilgjengelig navn. |
| 1.4.1 Bruk av farge | A | Status-farge er kun visuell forsterkning ved hover/pressed — handlingen kommuniseres via aria-label, ikke farge alene. |
| 1.4.10 Omflyt | AA | Knappen har fast 44×44 px klikkflate og reflower korrekt ned til 320 px viewport. |
| 1.4.11 Kontrast for ikke-tekstlig innhold | AA | Fokusindikator via :focus-visible oppfyller 3:1 kontrastkrav mot bakgrunnen. |
| 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 — ingen tastaturfelle. |
| 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 --ix-outline-default. |
| 2.5.8 Målstørrelse (minimum) | AA | min-width og min-height på 44 px gir klikkflate godt over minstekravet på 24×24 px. |
| 3.2.1 Ved fokus | A | Fokus trigger ingen kontekstendring. |
| 4.1.2 Navn, rolle, verdi | A | Native <button> med implisitt rolle=button. Tilgjengelig navn fra påkrevd aria-label. Ikonet er aria-hidden og bidrar ikke til navnet. |
Ikke relevant (44)
| Kriterium | Nivå | Hvorfor ikke relevant |
|---|---|---|
| 1.1.1 Ikke-tekstlig innhold | A | Ikonet er dekorativt og skjules med aria-hidden — knappens navn kommer fra aria-label. |
| 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.2 Meningsfull rekkefølge | A | Enkeltstående knapp uten lese-rekkefølge-avhengig innhold. |
| 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.3 Kontrast (minimum) | AA | Ikonet er en ensfarget glyf på transparent/lys bakgrunn; konsumenten styrer ikonfarge via context. Ingen tekst i komponenten. |
| 1.4.4 Endre tekststørrelse | AA | Skalerer med ikonstørrelsen; ingen tekst som kan klippes ved zoom. |
| 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 | |
| 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 |
|---|---|---|---|
name | IconName | Ikonet som vises. Påkrevd | |
aria-label | string | Tilgjengelig navn som beskriver handlingen. Påkrevd, og må oversettes (i18n) | |
status | 'default' | 'info' | 'success' | 'warning' | 'danger' | 'default' | Fargetema for pekehvil og trykk |
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Størrelse på ikonet |
I tillegg støttes alle standard HTML-knapp-attributter (onClick, onFocus, disabled, type, form, name, value, tabIndex osv.) og settes direkte på <button>-elementet.
Tilpasning med CSS
Trenger du ix-interactive-icon-stylingen på HTML du setter sammen selv — uten React-komponenten — kan du bruke klassen direkte på et <button>-element som wrapper et <ix-icon>.
Tilgjengelige klasser og attributter
| Element/tilstand | Selektor / attributt |
|---|---|
| Knapp | .ix-interactive-icon |
| Status | data-status="info" / "success" / "warning" / "danger" |
| Pekehvil-farge | intern variabel --ii-interactive-icon-fill-hover |
| Trykk-farge | intern variabel --ii-interactive-icon-fill-active |
Variablene med --ii--prefiks er interne implementasjonsdetaljer og er ikke en del av det offentlige API-et.
Eksempel: ren HTML
<button type="button" class="ix-interactive-icon" aria-label="Rediger">
<ix-icon name="rediger" aria-hidden="true" class="ix-icon"></ix-icon>
</button>
<button type="button" class="ix-interactive-icon" data-status="danger" aria-label="Slett">
<ix-icon name="slett" aria-hidden="true" class="ix-icon"></ix-icon>
</button>