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