Icon Button

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" icon={<SearchIcon />} />
<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 />}
/>
<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 Fred"
size="lg"
icon={<PhoneIcon />}
/>
<IconButton
colorScheme="teal"
aria-label="Call Fred"
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 />}
/>
<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 Fred"
fontSize="20px"
icon={<MdPhone />}
/>
<IconButton
variant="outline"
colorScheme="teal"
aria-label="Call Fred"
fontSize="20px"
icon={<MdPhone />}
/>

Props#

aria-labelrequired

Description

A11y: A label that describes the button

Type
string

colorScheme

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
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"

© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web

  • Creative Tim
  • Simmmple
  • Blog
  • License