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 { IconButton } from "@chakra-ui/react"


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


aria-labelrequiredstringA11y: A label that describes the button-
colorScheme"blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram""gray"
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-
size"sm" | "md" | "lg" | "xs""md"
spinnerReact.ReactElementReplace the spinner component when `isLoading` is set to `true`-
variant"link" | "outline" | "solid" | "ghost" | "unstyled""solid"