Icon Button

IconButton composes the Button component except that it renders only an icon.

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Since IconButton only renders an icon, you must pass the aria-label prop, so screen readers can give meaning to the button.

Import#

import { IconButton } from "@chakra-ui/react"

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

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

Editable Example

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

Editable Example

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

Editable Example

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

Editable Example

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

Editable Example

Name	Type	Description	Default
aria-label	required`string`	A11y: 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"`
icon	`React.ReactElement`	The icon to be used in the button.	-
isActive	`boolean`	If `true`, the button will be styled in its active state.	-
isDisabled	`boolean`	If `true`, the button will be disabled.	-
isLoading	`boolean`	If `true`, the button will show a spinner.	-
isRound	`boolean`	If `true`, the button will be perfectly round. Else, it'll be slightly round	-
size	`"sm" \| "md" \| "lg" \| "xs"`		`"md"`
spinner	`React.ReactElement`	Replace the spinner component when `isLoading` is set to `true`	-
variant	`"link" \| "outline" \| "solid" \| "ghost" \| "unstyled"`		`"solid"`