Icon Button

Used to render an icon within a button

AI TipWant to skip the docs? Use the MCP Server

Usage

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

<IconButton aria-label="Search database">
  <LuSearch />
</IconButton>

Use the size prop to change the size of the button.

Use the variant prop to change its visual style

solid

subtle

surface

outline

ghost

Use the colorPalette prop to change the color of the button

Set rounded="full" to make the button fully rounded

Prop	Default	Type
`spinnerPlacement`	`start`	`'start' \| 'end' \| undefined` The placement of the spinner
`colorPalette`	`gray`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`size`	`md`	`'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` The size of the component
`variant`	`solid`	`'solid' \| 'subtle' \| 'surface' \| 'outline' \| 'ghost' \| 'plain'` The variant of the component
`spinner`		`React.ReactNode \| undefined` The spinner to show while loading.
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.