Gå til hovedinnhold
KOMPONENTER

Icon button

npmv3.0.2

Ikonknapper har bare et ikon uten label og lar brukerne gjøre handlinger og ta valg med et enkelt klikk.

Kontrast

Komponenter

IconButton

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

Ikonknapper har ingen label og er bare et ikon. Tooltips er derfor nødvendige når de brukes alene. Ved å hovre på ikonknappen, vil det dukke opp en tooltip med en tekstbeskrivelse som forklarer handlingen brukeren kan utføre.

Siden de ikke har en label sparer de også mye plass i et grensesnitt. Ikonknapper lar deg ha andre ikonknapper ved siden av dem på en liten plass. Tommelfingerregelen å bare ha ikonknapper, er kun aktuelt for ikoner som man anser som globalt forståelige.

Eksempler

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

Kontrast
Rediger denne siden på Bitbucket