Icon Button
Icon button renders an icon within in a button.
Import
import { IconButton } from '@chakra-ui/react';
Usage
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.
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.
Button Sizes
Like the Button component
, pass the size
prop to change the size of the
button.
Button Variants
Like the Button
component, pass the variant
prop to change the style of the
button.
With custom icon
You can also use icons from popular libraries like react-icons and just pass it into the button.
Props
aria-label
required
aria-label
required
A11y: A label that describes the button
string
colorScheme
colorScheme
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
"gray"
icon
icon
The icon to be used in the button.
React.ReactElement
isActive
isActive
If true
, the button will be styled in its active state.
boolean
isDisabled
isDisabled
If true
, the button will be disabled.
boolean
isLoading
isLoading
If true
, the button will show a spinner.
boolean
isRound
isRound
If true
, the button will be perfectly round. Else, it'll be slightly round
boolean
size
size
"lg" | "md" | "sm" | "xs"
"md"
spinner
spinner
Replace the spinner component when isLoading
is set to true
React.ReactElement
variant
variant
"ghost" | "outline" | "solid" | "link" | "unstyled"
"solid"