Icon Button

Icon button renders an icon within in a button.

    SourceTheme source@chakra-ui/button

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
"lg" | "md" | "sm" | "xs"
Default
"md"

spinner

Description

Replace the spinner component when isLoading is set to true

Type
React.ReactElement

variant

Type
"ghost" | "outline" | "solid" | "link" | "unstyled"
Default
"solid"
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel