KOMPONENTER

Icon button

npmv3.3.3

Ikonknapper 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';

Varianter

IconButton

Ikonknapper brukes ofte som inline-handlinger i tabellrader og verktøylinjer.

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 mde ikoner som man anser som globalt forståelige.

Universell utforming

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.

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

Kilder:

Props

import { IconButton } from '@entur/button';

Denne komponenten har ingen props