components
IconButton (code)
IconButtons are specific instances of a Button, where the only content is an Icon.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| accessibilityLabel | String | - | - | Accessible friendly label. Will not be shown |
| appearance | 'default''primary''secondary''plain''outline' | 'default' | - | Controls the button’s background, text, and border color. |
| as | FunctionStringNodeObject | 'button' | - | Render with a different HTML tag or a different custom component. |
| circular | Boolean | - | - | Display as a circular or not. |
| className | String | - | - | Extend classNames. |
| color | String | - | - | Changes the IconButton's color, choose one of the tokens. NOTE: The color prop is only used with appearance `default`. |
| disabled | Boolean | - | - | Visually and functionally disables the button. |
| icon | FunctionNodeObject | - | - | The icon rendered inside the IconButton (passed to Icon as), choose one of the icons package. |
| onClick | Function | - | - | Fires when the IconButton is clicked on. |
| size | 'small''large' | 'large' | - | Changes the button's height and width. |
| flexShrink | 0 | - | - |
System Props
alignSelf, flex, flexBasis, flexGrow, flexShrink, order
m, mb, ml, mr, mt, mx, my
float
position, bottom, left, right, top, zIndex
System Props
Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.
To read more about the system, click here to check out its dedicated page.
Appearance
default: default
Just like a regular Button, an IconButton has several variations for its appearance.
Icon
default: Placeholder
Changing the contained Icon can be done by altering the icon prop.
Circular
default: false
An IconButton is either contained in a square or in a circle.
Size
default: large
IconButtons come in two sizes, large and small.
Disabled
default: false
To indicate to a user that an IconButton can not be interacted with, add the disabled prop.