Sponsor

Icon Button

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#

Usage#

Editable Example

Button Colors#

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

Editable Example

Button Sizes#

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

Editable Example

Button Variants#

Just like the Button component, pass the variant prop to change the size 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.
variantColorstringgrayThe color scheme of the button.
isDisabledbooleanIf true, the button will be disabled.
isLoadingbooleanIf true, the button will show a spinner.

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2020 Segun Adebayo