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

Props#