Chakra UI v3でIconButtonはIconのインストールが必要

はじめに

Chakra UIで実装中にIconButtonを使用する機会があったのでメモとして残しておく。

概要

Chakra UIのIconButtonは、アイコンだけを表示するボタンを作るためのコンポーネントです。

IconButton自体は@chakra-ui/reactに含まれているため、Chakra UIをインストールしていれば別途インストールは不要です。

ただし、ボタンの中に表示するアイコンはChakra UIには含まれていないため、react-iconsなどのアイコンライブラリを別途インストールする必要があります。

私は、react-iconsを使いました。

npm install react-icons

使用例

import { RxHamburgerMenu } from "react-icons/rx";


   <IconButton aria-label="ハンバーガーボタン">
        <RxHamburgerMenu />
    </IconButton>

IconButtonを使うときは、aria-labelを指定します！
アクセシビリティ的にも大事ですよね〜

参考