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.

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.

children
ReactNode

className
string

CSS class to be appended to the root element

isActive
false
true

Applies active styles

isDisabled
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

size
"small"
"medium"
"large"

Determines size variation of Button component

testId
string

A [data-test-id] attribute used for testing purposes

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

Determines style variation of Button component

Accessibility

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