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.

Komponenter

IconButton

Navn	Type	Default-verdi	Beskrivelse
`children`	`ReactNode`		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.