iconbutton.mdx

import SEO from "../components/SEO";

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

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

Button Colors

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

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

Button Sizes

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

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

Button Variants

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

<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.

// 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.