IconButton

Start actions, such as "Lock" or "Delete".

The button meaning is only represented with an icon. Use it only with icons users are familiar with from previous experience in other products.

Import

import { IconButton } from '@contentful/f36-components';
// or
import { 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.

With tooltip for enhanced user experience.

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 Storybook

Name

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

tooltipProps
CommonProps & WithEnhancedContent & Omit<TooltipInternalProps, "children">

A tooltipProps attribute used to conditionally render the tooltip around root element

variant
"negative"
"positive"
"primary"
"secondary"
"transparent"

Determines style variation of Button component

secondary
withTooltip
false
true

Triggers, wheter or not to render the tooltip

Accessibility

We enforce aria-label property for IconButton component to ensure that these buttons are fully accessible for screen readers.

For easier understanding we also encourage the use of the tooltipProps and giving it the same content as the aria-label