Import
import { IconButton } from '@contentful/f36-components';// orimport { IconButton } from '@contentful/f36-button';
Examples
Sizes and Variations
You need to pass an Icon component you want to render to the icon
prop, you may also provide variant
and size
to the icon.
As toolbar actions
In toolbars, action bars, and in all other space restricted containers we suggest using IconButton
instead of Button
component.
For these cases, it would be also beneficial to use Tooltip as a wrapper of IconButton
to help users with understanding the button's purpose.
Props (API reference)
Open in StorybookName | Type | Default |
---|---|---|
aria-label required | string Aria label is required when using icon only | |
icon required | ReactElement<any, string | JSXElementConstructor<any>> Expects any of the icon components | |
as | HTML Tag or React Component (e.g. div, span, etc) The element used for the root node. | button |
children Deprecated | ReactNode | |
className | string CSS class to be appended to the root element | |
isActive | false true Applies active styles | false |
isDisabled | false true Disabled interaction and applies disabled styles | false |
isFullWidth | false true Forces button to take 100% of the container | |
isLoading | false true Adds loading indicator icon and disables interactions | |
size | "small" "medium" "large" Determines size variation of IconButton component Note: 'large' is deprecated | |
testId | string A [data-test-id] attribute used for testing purposes | |
variant | "negative" "positive" "primary" "secondary" "transparent" Determines style variation of Button component | secondary |
Accessibility
We enforce aria-label
property for IconButton
component to ensure that these buttons are fully accessible for screen readers.