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.

<IconButton aria-label='Search database' icon={<SearchIcon />} />

<IconButton aria-label='Search database' icon={<SearchIcon />} />

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.

<IconButton colorScheme='blue' aria-label='Search database' icon={<SearchIcon />} />

<IconButton
  colorScheme='blue'
  aria-label='Search database'
  icon={<SearchIcon />}
/>

Button Sizes

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

<IconButton colorScheme='teal' aria-label='Call Segun' size='lg' icon={<PhoneIcon />} />

<IconButton
  colorScheme='teal'
  aria-label='Call Segun'
  size='lg'
  icon={<PhoneIcon />}
/>

Button Variants

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

<IconButton variant='outline' colorScheme='teal' aria-label='Send email' icon={<EmailIcon />} />

<IconButton
  variant='outline'
  colorScheme='teal'
  aria-label='Send email'
  icon={<EmailIcon />}
/>

With custom icon

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

<IconButton variant='outline' colorScheme='teal' aria-label='Call Sage' fontSize='20px' icon={<MdPhone />} />

<IconButton
  variant='outline'
  colorScheme='teal'
  aria-label='Call Sage'
  fontSize='20px'
  icon={<MdPhone />}
/>

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"