Icon Button

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.

Import#

Usage#

Editable Example

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.

Editable Example

Button Sizes#

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

Editable Example

Button Variants#

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

Editable Example

With custom icon#

You can also use icons from popular libraries like react-icons and just pass it into the button.

Editable Example

Props#

NameTypeDefaultDescription
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.
colorSchemestringgrayThe color scheme of the button.
isDisabledbooleanIf true, the button will be disabled.
isLoadingbooleanIf true, the button will show a spinner.
Edit this page

Made byChakraandRock Content