Icon Button

Icon button renders an icon within in a button.

    SourceTheme source@chakra-ui/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 />} />

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 />}
/>

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 />}
/>

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 />}
/>

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 />}
/>

With perfectly round button#

You can pass the isRound prop to make the button perfectly round

<IconButton
isRound={true}
variant='solid'
colorScheme='teal'
aria-label='Done'
fontSize='20px'
icon={<CheckIcon />}
/>
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel