Skip to main content

Icon Button

Icon button renders an icon within in a button.

Import

import { IconButton } from '@chakra-ui/react';

Usage

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.

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.

Button Sizes

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

Button Variants

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

With custom icon

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

Props

aria-labelrequired

Description

A11y: A label that describes the button

Type
string

colorScheme

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
Default
"gray"

icon

Description

The icon to be used in the button.

Type
React.ReactElement

isActive

Description

If true, the button will be styled in its active state.

Type
boolean

isDisabled

Description

If true, the button will be disabled.

Type
boolean

isLoading

Description

If true, the button will show a spinner.

Type
boolean

isRound

Description

If true, the button will be perfectly round. Else, it'll be slightly round

Type
boolean

size

Type
"lg" | "md" | "sm" | "xs"
Default
"md"

spinner

Description

Replace the spinner component when isLoading is set to true

Type
React.ReactElement

variant

Type
"ghost" | "outline" | "solid" | "link" | "unstyled"
Default
"solid"