Icon button

Ikonknapp har ulike varianter og konfigurasjoner for ulike behov, som størrelse, tilstand og innholdstyper. Under kan du teste og se hvordan de oppfører seg i ulike kontekster.

Når skal vi bruke Ikonknapp?

IconButton passer når handlingen ikke er primær eller sekundær, men likevel må være synlig. Den brukes ofte for å spare plass, skape kontrast i en knappegruppe eller markere et hierarki der handlingen er mindre viktig. Ikonknapper er nyttige i tabeller, lister eller som inline-funksjoner i tekst og skjema. Ikonet skal alltid støtte og forsterke meningen i handlingen, og ikon-only bør bare brukes med aria-label og når symbolet er allment forstått.

Størrelser

Standardstørrelsen på våre knappene er “medium”. Trenger man en knapp som tar mer fokus kan man bruke "large" med en større høyde. Hvis man ønsker en knapp med mindre fokus eller som tar mindre plass kan man bruke size="small".

God praksis

For å sikre brukervennlige og tilgjengelige ikonknapper, bør vi følge noen enkle retningslinjer når vi bruker den.

Ikonknapp med label

Gjør

Kombiner ikon med tekst/label for å gjøre handlingen tydelig og universelt tilgjengelig.

Unngå

Bruk ikke ikonknapp med kun ikon når symbolet er uvanlig eller vanskelig å forstå.

Hierarkinivå av ikonknapper

Ikonknapp med teksten «Endre sete» og et seteikon foran teksten.

Gjør

Bruk ikonknapper når handlingen er sekundær eller støttende.

Ikonknapp med teksten «Kjøp» og et kortikon foran.

Unngå

Bruk ikke ikonknapp som primær call-to-action.

Ikonknapp i tabell

Gjør

Ikonknapp med kun ikon brukes som inline-handlinger i tabellrader og verktøylinjer når det finnes header til kolonnen.

Unngå

Unngå ikonknapper med kun ikon i tabellrader og verktøylinjer uten en header til kolonnen.

Ikonplassering i knapp

To ikonknapper med «Forrige» og «Neste» der «Forrige» har pil mot venstre før teksten og «Neste» har pil mot høyre etter teksten.

Gjør

Bruk logisk ikonplassering med visuell flyt.

To ikonknapper med «Forrige» og «Neste» der «Forrige» har pil mot venstre før teksten og «Neste» har pil mot høyre før teksten.

Unngå

Ikonplassering med dårlig visuell flyt.

Tilgjengelighet (UU)

Ikonknapp må brukes på en måte som sikrer god tilgjengelighet for alle brukere – inkludert skjermleserbrukere og de som kun bruker tastatur. Her er retningslinjene du bør følge:

Forståelighet:

Ikon + tekst er å foretrekke, fordi det gir klar mening både visuelt og for skjermlesere.
Klikkflate (minst 24x24 px) i tråd med WCAG 2.5.8.

Kontrastkrav:

2. Kontrastkrav

Tekst (f.eks. hjelpetekst) må ha minst 4.5:1 kontrastforhold mot bakgrunnen.
Grafiske elemeneter og ikoner med betydning (som et spørsmålstegn for hjelpetekst) må også oppfylle kontrastkrav minst 3:1.

Skjermleser-støtte:

Tooltip må være mulig å lese med skjermleser.
Bruk ikke ikon-only uten aria-label – dette bryter WCAG og skaper usikkerhet.

Tastaturnavigasjon:

Tooltip av ikonknapp må være fokuserbart med tab-tast.

Disabled state:

Knapper må ha en klar og forståelig hensikt, og det bør være åpenbart hva som skjer når brukeren klikker på dem. Derfor anbefaler vi å unngå disabled på knapper så langt det lar seg gjøre. Dette fordi disabled kan bryte WCAG-reglene:

Manglende tilbakemelding. Deaktiverte knapper er ofte fullstendig inaktive og gir ingen respons når brukeren interagerer med dem. Dette kan føre til forvirring blant brukere som ikke forstår hvorfor knappen ikke virker. Det kan også føre til at brukere av skjermlesere ikke får en indikasjon på hvorfor knappen er inaktiv.
Utilgjengelighet for hjelpemiddelteknologi. Deaktiverte knapper kan bli hoppet over av hjelpemiddelteknologi som skjermlesere, fordi slike knapper vanligvis fjernes fra fokusrekkefølgen. Dette betyr at brukere som navigerer med tastatur eller skjermlesere, kanskje aldri oppdager at knappen eksisterer.
Dynamisk oppdatering av status. Hvis en knapp aktiveres eller deaktiveres basert på brukerens handlinger, må disse endringene kommuniseres effektivt til brukeren. Mange implementasjoner av deaktiverte knapper informerer ikke brukere om statusendringen, noe som skaper trøbbel for personer som navigerer med skjermlesere eller andre hjelpemidler.
Forvirrende designmønstre. Brukere forstår ofte ikke hvorfor en deaktivert knapp ikke kan brukes, spesielt hvis det ikke finnes tydelig informasjon om hva som må gjøres for å aktivere den. Dette kan føre til frustrasjon, spesielt for brukere med kognitive eller læringsrelaterte utfordringer.

Dersom du likevel trenger å bruke deaktivert knapp

Bruk tydelig hjelpetekst. Forklar på forhånd hva som må gjøres for å aktivere knappen. Dette kan gjøres gjennom visuelle hjelpemidler eller tekst nær knappen. Og/eller aria-label for teknologiske hjelpemidler.
Oppretthold kontrast. Selv om knappen ikke er interaktiv, bør den ha tilstrekkelig kontrast til å være synlig for alle brukere. Bruk alternative visuelle signaler som ikke senker kontrasten, som et ikon eller en stilendring som fortsatt oppfyller kontrastkravene.
Vis alltid knappen som klikkbar. Gjør knappen klikkbar, men gi tilbakemelding når den ikke kan utføre en handling, for eksempel via en alert eller melding som forklarer hvorfor handlingen ikke er mulig.

Varianter

IconButton <Table>
    <TableHead>
      <TableRow>
        <HeaderCell>Fra</HeaderCell>
        <HeaderCell>Til</HeaderCell>
        <HeaderCell>Avgang</HeaderCell>
        <HeaderCell>Rediger</HeaderCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow>
        <DataCell>Majorstua</DataCell>
        <DataCell>Østerås</DataCell>
        <DataCell>10.00</DataCell>
        <DataCell>
          <Tooltip aria-hidden placement="bottom" content="Rediger reise">
            <IconButton aria-label="Rediger reise">
              <EditIcon />
            </IconButton>
          </Tooltip>
        </DataCell>
      </TableRow>
      <TableRow>
        <DataCell>Majorstua</DataCell>
        <DataCell>Østerås</DataCell>
        <DataCell>11.00</DataCell>
        <DataCell>
          <Tooltip aria-hidden placement="bottom" content="Rediger reise">
            <IconButton aria-label="Rediger reise">
              <EditIcon />
            </IconButton>
          </Tooltip>
        </DataCell>
      </TableRow>
      <TableRow>
        <DataCell>Majorstua</DataCell>
        <DataCell>Østerås</DataCell>
        <DataCell>12.00</DataCell>
        <DataCell>
          <Tooltip aria-hidden placement="bottom" content="Rediger reise">
            <IconButton aria-label="Rediger reise">
              <EditIcon />
            </IconButton>
          </Tooltip>
        </DataCell>
      </TableRow>
    </TableBody>
  </Table>

Retningslinjer

Siden ikonknapper bare et ikon, er Tooltip nødvendig når de brukes uten en label. Ved å hovre eller fokusere på ikonknappen vil det da dukke opp et tooltip med en tekstbeskrivelse som forklarer handlingen brukeren kan utføre.
Siden de ikke har en label sparer disse knappene mye plass i et grensesnitt. Ikonknapper lar deg ha flere ikonknapper ved siden av hverandre på et liten plassområde. Tommelfingerregelen for ikonknapper er å kun bruke dem med ikoner som man anser som globalt forståelige.

Tilgjengelighet (UU)

Det er viktig at knappen er tilgjengelig og forståelig for alle, for å sikre dette må du bruke en aria-label på knappen som beskriver hva den gjør. For å unngå dobbel-opplesing i skjermleseren når du bruker Tooltip er det anbefalt å gjøre som i eksempelet før og sette en aria-hidden på selve Tooltip-en.
En annen løsning, som vil være enda mer tilgjengelig, er å ha en label til knappen – pass da på at label-en er koblet korrekt til knappen eller skjult med aria-hidden for å unngå dobbel-opplesing.

Ellers følg våre generelle råd om knapper og disabled states.

Kilder:

Komponentprops

IconButton

Denne komponenten har ingen props