This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

IconButton

Table of contents

How to use IconButton

IconButton composes the Button component except that it renders only an icon.
You must pass the Icon component you want to render to the icon prop, you may also provide the variant and size to the Icon.

Code examples

Example of simple usage:

Props

NameRequiredDefaultTypeDescription
aria-labelrequiredstringAria label is required when using icon only
iconrequiredReactElement<any, string | JSXElementConstructor<any>>Expects any of the icon components
isActivefalse
false
true
Applies active styles
isDisabledfalse
false
true
Disabled interaction and applies disabled styles
isFullWidth
false
true
Forces button to take 100% of the container
isLoading
false
true
Adds loading indicator icon and disables interactions
sizemedium
"small"
"medium"
"large"
Determines size variation of Button component
variantsecondaryButtonVariantDetermines style variation of Button component
asbuttonHTML Tag or React Component, e.g. div, span, etc.The element used for the root node.
childrenReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdstringA [data-test-id] attribute used for testing purposes