IconButton

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#

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

Usage#

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

<c-icon-button
  variant-color="vue"
  aria-label="Call Jonathan"
  size="lg"
  icon="phone"
/>

Button Variants#

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

Editable Example

<c-icon-button
  variant="outline"
  variant-color="vue"
  aria-label="Send email"
  icon="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.

<c-icon-button
  variant-color="orange"
  aria-label="Drink coffee"
  icon="coffee"
/>

Props#

Name	Type	Default	Description
size	`sm`, `md`, `lg`	`md`	Specifies an explicit icon size instead of the default value.
icon	`string`	`null`	The icon to be used. Refer to the Icons section of the docs for the available icon options.
isRound	`boolean`	`false`	If `true`, the button will be perfectly round. Else, it'll be slightly round.
aria-label (required)	`string`		A11y: A label that describes the button.
variant	`outline`, `ghost`, `unstyled` , `link` , `solid`	`solid`	The variant of the button style to use.
variantColor	`string`	`gray`	The color scheme of the button.
isDisabled	`boolean`		If `true`, the button will be disabled.
isLoading	`boolean`		If `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!