Icon Button

Used to render an icon within a button

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

const Demo = () => {
  return (
    <IconButton aria-label="Search database">
      <LuSearch />
    </IconButton>
  )
}

Usage

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

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

Examples

Sizes

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

import { For, HStack, IconButton, Text, VStack } from "@chakra-ui/react"
import { LuPhone } from "react-icons/lu"

const Demo = () => {
  return (
    <HStack wrap="wrap" gap="8">
      <For each={["xs", "sm", "md", "lg"]}>
        {(size) => (
          <VStack key={size}>
            <IconButton
              aria-label="Search database"
              variant="outline"
              size={size}
            >
              <LuPhone />
            </IconButton>
            <Text textStyle="sm">{size}</Text>
          </VStack>
        )}
      </For>
    </HStack>
  )
}

Variants

Use the variant prop to change its visual style

solid

subtle

surface

outline

ghost

import { For, HStack, IconButton, Text, VStack } from "@chakra-ui/react"
import { LuVoicemail } from "react-icons/lu"

const Demo = () => {
  return (
    <HStack wrap="wrap" gap="8">
      <For each={["solid", "subtle", "surface", "outline", "ghost"]}>
        {(variant) => (
          <VStack key={variant}>
            <IconButton
              aria-label="Call support"
              key={variant}
              variant={variant}
            >
              <LuVoicemail />
            </IconButton>
            <Text textStyle="sm">{variant}</Text>
          </VStack>
        )}
      </For>
    </HStack>
  )
}

Color

Use the colorPalette prop to change the color of the button

import { For, HStack, IconButton } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
import { LuSearch } from "react-icons/lu"

const Demo = () => {
  return (
    <HStack wrap="wrap">
      <For each={colorPalettes}>
        {(c) => (
          <IconButton aria-label="Search database" key={c} colorPalette={c}>
            <LuSearch />
          </IconButton>
        )}
      </For>
    </HStack>
  )
}

Rounded

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

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

const Demo = () => {
  return (
    <IconButton aria-label="Call support" rounded="full">
      <LuVoicemail />
    </IconButton>
  )
}

Props

Prop	Default	Type
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink' \| 'accent'` The color palette of the component
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg'` The size of the component
`variant`	`'solid'`	`'solid' \| 'subtle' \| 'surface' \| 'outline' \| 'ghost' \| 'plain'` The variant of the component

Icon

Image