ChatGPT UI Icon Button - Horizon AI Template

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.

Import#

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

Usage#

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

<IconButton
  aria-label="Search database"
  borderRadius="10px"
  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="brand"
  aria-label="Search database"
  borderRadius="10px"
  icon={<SearchIcon />}
/>

<IconButton
  colorScheme="brand"
  aria-label="Search database"
  borderRadius="10px"
  icon={<SearchIcon />}
/>

Button Sizes#

Like the Button component, pass the size prop to change the size of the button.

<IconButton
  colorScheme="brand"
  aria-label="Call Fred"
  borderRadius="10px"
  size="lg"
  icon={<PhoneIcon />}
/>

<IconButton
  colorScheme="brand"
  aria-label="Call Fred"
  borderRadius="10px"
  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="brand"
  borderRadius="10px"
  aria-label="Send email"
  icon={<EmailIcon />}
/>

<IconButton
  variant="outline"
  colorScheme="brand"
  borderRadius="10px"
  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="brand"
  borderRadius="10px"
  aria-label="Call Fred"
  fontSize="20px"
  icon={<MdPhone />}
/>

<IconButton
  variant="outline"
  colorScheme="brand"
  borderRadius="10px"
  aria-label="Call Fred"
  fontSize="20px"
  icon={<MdPhone />}
/>

Props#

`aria-labelrequired`

Description

A11y: A label that describes the button

Type

string

`colorScheme`

Type

"brand" | "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | ... 4 more ...

Default

"gray"

`icon`

Description

The icon to be used in the button.

Type

React.ReactElement

`isActive`

Description

If true, the button will be styled in its active state.

Type

boolean

`isDisabled`

Description

If true, the button will be disabled.

Type

boolean

`isLoading`

Description

If true, the button will show a spinner.

Type

boolean

`isRound`

Description

If true, the button will be perfectly round. Else, it'll be slightly round

Type

boolean

`size`

Type

"sm" | "md" | "lg" | "xs"

Default

"md"

`spinner`

Description

Replace the spinner component when isLoading is set to true

Type

React.ReactElement

`variant`

Type

"link" | "outline" | "solid" | "ghost" | "unstyled"

Default

"solid"