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 Button med tekst
- Handlinger der ikonet alene er tvetydig — bruk en Button med synlig tekst
- Navigasjon til en ny side uten at noe utføres — bruk en lenke
Bruk
En InteractiveIcon må alltid ha en tilgjengelig label som beskriver handlingen.
Laster...
Eksempler
Statuser
status styrer fargetonen som vises ved pekehvil og trykk. neutral 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.
Setter du ikke status, arver ikonet status fra nærmeste forelder med data-status (f.eks. en Message eller et status-kort), slik at hover/trykk følger omgivelsene. Uten en slik status-kontekst er ikonet nøytralt. En eksplisitt status på ikonet overstyrer alltid arven — også status="neutral", som er måten å holde ikonet nøytralt inne i en farget kontekst.
Laster...
Størrelser
size følger ikonets størrelsesskala (sm, md, lg, xl).
Laster...
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.
Laster...
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 | 'neutral' | 'info' | 'success' | 'warning' | 'danger' | Fargetema for pekehvil og trykk. Uten status arves status fra nærmeste data-status-forelder, og ikonet er nøytralt uten en slik forelder; en eksplisitt status — inkludert neutral — overstyrer arven | |
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 selektorer
| Element/tilstand | Selektor / attributt |
|---|---|
| Knapp | .ix-interactive-icon |
| Status | data-status="neutral" / "info" / "success" / "warning" / "danger" (arves fra nærmeste data-status-forelder når det ikke settes på knappen; "neutral" bryter arven) |
| 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="edit" 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="delete" aria-hidden="true" class="ix-icon"></ix-icon>
</button>