IconButton composes the Button component, except that it renders only an icon.

Since it's only an icon that's rendered, it's required to pass the aria-label prop, so screen readers can give meaning to the button.


import { CIconButton } from "@chakra-ui/vue";


Editable Example
<c-icon-button aria-label="Search database" icon="search" />

Button Colors#

The CIconButton component accepts most of the props from the CButton component. We can use variantColor prop to change the color of the button.

Editable Example
<c-icon-button variant-color="blue" aria-label="Search database" icon="search" />

Button Sizes#

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

Editable Example
  aria-label="Call Jonathan"

Button Variants#

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

Editable Example
  aria-label="Send email"

With custom icon#

The CIconButton component accepts all icons accessible under this.$chakra.icons. You can see Icon to see how to add Fontawesome icons to Chakra UI.

Editable Example
// Example of `coffee` icon from fontawesome.

  aria-label="Drink coffee"


sizesm, md, lgmdSpecifies an explicit icon size instead of the default value.
iconstringnullThe icon to be used. Refer to the Icons section of the docs for the available icon options.
isRoundbooleanfalseIf true, the button will be perfectly round. Else, it'll be slightly round.
aria-label (required)stringA11y: A label that describes the button.
variantoutline, ghost, unstyled , link , solidsolidThe variant of the button style to use.
variantColorstringgrayThe color scheme of the button.
isDisabledbooleanIf true, the button will be disabled.
isLoadingbooleanIf true, the button will show a spinner.

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!