Icon button
npmv3.2.35Ikonknapper har bare et ikon uten label og lar brukerne gjøre handlinger og ta valg med et enkelt klikk.
npm install @entur/button@import '@entur/button/dist/styles.css';Komponenter
IconButton
import { IconButton } from '@entur/button';Retningslinjer for bruk
Siden ikonknapper bare et ikon er et 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 mde ikoner som man anser som globalt forståelige.
Hvordan oppnå god UU
Det er viktig at knappen er tilgjenglig og forstålig 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. Knappen har per i dag ingen prop for label, si fra på #talk-designsystem hvis dette ønskes.
Eksempler
Ikonknapper brukes ofte som inline-handlinger i tabellrader og verktøylinjer.