Gå til hovedinnhold
KOMPONENTER

Icon button

npmv3.2.24

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

Komponenter

IconButton

import { IconButton } from '@entur/button';
NavnTypeDefault-verdiBeskrivelse
childrenReactNode

Ikonet som du vil ha inne i knappen

aria-label?string

Tekst som forklarer knappens handling. MÅ være satt hvis du ikke har en forklarende tooltip på knappen

className?string

Ekstra klassenavn

disabled?boolean false

Deaktivering av knappen

as?string | React.ElementType'button'

HTML-elementet eller React-komponenten som lager knappen An override of the default HTML tag. Can also be another React component.

size?"small" | "medium" 'medium'

Størrelsen på knappen

loading?boolean false

Om knappen er opptatt, f.eks. med å lagre eller å kjøpe

ref?any

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.

Rediger denne siden på Bitbucket