Egnet til:
- å hjelpe brukeren med å huske handlinger som finnes på siden, for eksempel et ikon som viser en printer for utskriftsvennlig format.
- å plassere handlinger der hvor det er lite plass.
Uegnet til:
- situasjoner der handlingen er en viktig funksjon på siden.
- situasjoner der ikonet alene ikke tydelig illustrerer hva handlingen er. Bruk da InlineButton i stedet.
Teknisk dokumentasjon
Se IconButton i Storybook for tekniske detaljer.
Varianter
IconButton finnes både med og uten sirkel, og i ulike størrelser. Både sirkel og størrelse påvirker hvor mye oppmerksomhet knappen tar på siden.
Med sirkel
Uten sirkel
Universell utforming
- Bruk title-attributtet for å beskrive knappens funksjon, leses av hjelpemidler.
- Ikke bruk knappen for å navigere videre til et annet område.
- Bruk aktiv knapp med feilmelding i stedet for inaktiv (disabled) knapp fordi:
- inaktiv knapp har dårlig kontrast mot bakgrunn.
- det kan være vanskelig for folk å vite om knappen kan trykkes på.
- folk kan kan gå glipp av endring fra inaktiv til aktiv.
- noen skjermlesere leser ikke elementer som er inaktive.