Icon Button

IconButton composes the Button component except that it renders only an icon.

Since IconButton only renders an icon, you must pass the aria-label prop, so screen readers can give meaning to the button.

Import#

import { IconButton } from "@chakra-ui/react"

Usage#

Editable Example

Button Colors#

The IconButton component accepts most of the props from the Button component, so we can use colorScheme prop to change the color of the button.

Editable Example

Button Sizes#

Like the Button component, pass the size prop to change the size of the button.

Editable Example

Button Variants#

Like the Button component, pass the variant prop to change the style of the button.

Editable Example

With custom icon#

You can also use icons from popular libraries like react-icons and just pass it into the button.

Editable Example

Props#

NameTypeDescriptionDefault
aria-labelstringA11y: A label that describes the button-
colorSchemestring-
iconReact.ReactElementThe icon to be used in the button.-
isActivebooleanIf `true`, the button will be styled in its active state.-
isDisabledbooleanIf `true`, the button will be disabled.-
isLoadingbooleanIf `true`, the button will show a spinner.-
isRoundbooleanIf `true`, the button will be perfectly round. Else, it'll be slightly round-
sizestring-
spinnerReact.ReactElementReplace the spinner component when `isLoading` is set to `true`-
variantstring-
Edit this page