Gå til hovedinnhold
KOMPONENTER

Icon button

npmv2.8.2

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

Komponenter

IconButton

NavnTypePåkrevd?Default-verdiBeskrivelse
childrenReactNode

Ikonet som du vil ha inne i knappen

classNamestring

Ekstra klassenavn

disabledboolean false

Deaktivering av knappen

as("symbol" & ElementType<any>) | ("object" & ElementType<any>) | ("a" & ElementType<any>) | ("abbr" & ElementType<any>) | ... 173 more ... 'button'

HTML-elementet eller React-komponenten som lager knappen

size"small" | "medium" "medium"

Størrelsen på knappen

loadingboolean false

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

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.

Rediger denne siden på Bitbucket