IconButton
アイコンボタンコンポーネントです。アイコン単体またはラベル付きのアクションボタンとして使用します。
基本
<CheIconButton iconName="search" aria-label="検索" />ラベル付き
label を指定するとアイコンの横にテキストを表示できます。ラベル付きバリアントはサイズが固定（h:32px, icon:18px）のため、size propは指定できません。label または aria-label のどちらかが必須です。
<CheIconButton iconName="search" label="検索" />
<CheIconButton iconName="search" aria-label="検索" />サイズ
size でボタンのサイズを指定できます。デフォルトは "4.5" です。
<CheIconButton iconName="search" size="4.5" aria-label="検索" />
<CheIconButton iconName="search" size="4" aria-label="検索" />無効状態
disabled でボタンを無効化できます。
<CheIconButton iconName="search" label="検索" disabled />
<CheIconButton iconName="search" aria-label="検索" disabled />div要素として使用
as="div" を指定すると <div> 要素として描画されます。<a> タグで囲んでナビゲーション用途に使う場合に便利です。
<a href="/path">
<CheIconButton as="div" iconName="search" aria-label="検索" />
</a>すべてのバリエーション
すべてのバリエーション一覧は カタログページ を参照してください。
Props
| 属性 | 詳細 | 型 | デフォルト | 必須 |
|---|---|---|---|---|
| as | 描画する要素 | ”button” | “div" | "button” | No |
| iconName | アイコン名 | IconName | - | Yes |
| iconType | アイコンの種類 | ”line” | “fill" | "line” | No |
| size | ボタンサイズ（アイコンのみ時） | “4.5” | “4" | "4.5” | No |
| label | ラベルテキスト（指定時はサイズ固定） | string | - | ※ |
| aria-label | スクリーンリーダー用ラベル | string | - | ※ |
| type | ボタンのtype属性（as="button" 時） | “button” | “submit” | “reset" | "button” | No |
| disabled | 無効状態（as="button" 時） | boolean | false | No |
| className | カスタムクラス | string | - | No |
※ label または aria-label のどちらか一方が必須です。