Gå til hovedinnhold

Knapper

Icon button

@entur/buttonv5.2.1

Ikonknapp er en knapp med ikon, og bør som hovedregel kombineres med tekst/label for å sikre universell utforming. Ikon-only skal kun brukes med aria-label og i tilfeller der ikonet er tydelig og allment forstått.

IconButton-props

Bruk Ikonknapp når

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.

Retningslinjer

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.

Eksempler