Chakra-UI

I♥️Components

Icon Button

|

Chakra Docs

|

⦾ The IconButton component in the Chakra UI library serves to encapsulate an icon within a clickable button interface, and the flexibility to adjust the appearance and size of buttoned icons is extensive, allowing for a seamless incorporation into your application.

This compact and visually intuitive component is perfect for applications that demand streamlined, self-explanatory user interfaces. With the IconButton component, you can not only use all of the icons provided by Chakra UI, but you can also use any icon from any library, such as React Icons, Bootstrap Icons, or Material UI Icons.

Theis component can be imported as follows:

Examples

Basic Usage

⦾ An IconButton is essentially a derivative of the standard Button component; however, it solely displays an icon, rather than text or a mix of text and icon. Consequently, for screen reader accessibility, an aria-label prop must be supplied to ensure the button can be interpreted meaningfully. The icon can be inserted via the icon prop.

Code

Customizing Color

⦾ The colorScheme prop allows you to alter the IconButton 's color, drawing from the Button component's extensive range of color options. Below, an example demonstrates a variety of color options with a number of Chakra icons that can be used as an IconButton.

cyan colorScheme

teal colorScheme

green colorScheme

orange colorScheme

purple colorScheme

pink colorScheme

Code

Customizing Size

⦾ The size prop is another property borrowed from the Button component, granting you control over the IconButton's dimensions. It accepts various presets such as 'sm', 'md', 'lg'.

xs size

sm size

md size

lg size

Code

Customizing the Variant

⦾ Passing the variant prop allows you to adjust theIconButton's style, adopting the same range of options as the Button component.

outline variant

solid variant

ghost variant

link variant

Code

isRound prop

⦾ The isRound prop when passed into the IconButton component, will render the button in a fully round shape, creating a unique visual style. This can be especially useful when you want to emphasize certain actions within your application. Below, you can see all size options set with the isRound prop.

Code

isLoading

⦾ The isLoading prop comes in handy when you want to indicate a loading state for the button. When it's set to true, the IconButton will display a spinner in lieu of the icon, signaling to the user that an operation is currently being processed.

The following example simulates a download operation, with the isLoading prop being set to true for 2 seconds after a user clicks.

Code

Did you know?

Creative Idea No. 1

Icon Transition on Hover: While the IconButton component focuses primarily on the click interaction, you can introduce a hover effect that changes the icon. This can provide a subtle hint to the user about the button's functionality or simply add a dynamic touch to the UI. The following is a button that changes from a "plus" to a "check" icon upon hover.

Code

Creative Idea No. 2

IconButton as a Toggle Switch: An IconButton can also function as a toggle switch, changing the icon to reflect the current state. This can be particularly useful for operations like "mute/unmute" or "follow/unfollow". Here's an example with a mute/unmute functionality.

Code

Creative Idea No. 3

IconButton with Tooltip: Enhance an IconButton's accessibility and clarity by attaching a tooltip that provides a brief description of its function when hovered over.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.