ガイドライン
Icon Button
アイコンボタンはフォームの送信、ダイアログの展開、アクションのキャンセル、削除の実行など、アクションやイベントのトリガーとして使用するコンポーネントです。
Anatomy: 解剖図
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
| 1 | Container | HTML Button エレメント | — | |
| 2 | Icon | ボタンにコンテキストを付与するためのアイコン要素 | Icon | — |
Options: 選択肢
Size
xs
もっとも小さいサイズのアイコンボタンです。Input Dateなど、コンポーネントの中でアイコンボタンを使用するためのサイズです。ページに直接配置することはありません。
sm
通常よりも小さなサイズです。限られたスペースにアイコンボタンを配置する場合かつアクションの重要性が低い場合に使用します。
md (default)
アイコンボタンのデフォルトのサイズです。ノーマルが最も使用されるサイズです。他のサイズのアイコンボタンはノーマルを基準に重要度に応じて使用します。
lg
大きなアイコンボタンはアクションの重要性を高めるため、使用は極力控えてください。
Variant
Solid
背景色が付与されているスタイルです。全てのスタイルの中で最も目立つように設計されています。
画面内で最も重要なアクションに使用します。そのため、Solidスタイルのアイコンボタンは同一のビュー内でThemeごとに1回までの使用を推奨します。
Outline
枠線が付与されているスタイルのアイコンボタンです。副次的なアクションに使用します。
Ghost
背景、枠線がないアイコンのみのボタンです。主にコンポーネントの中で使用するためのスタイルです。
Theme
Primary
体験における必要不可欠なタスクを実行するためのアイコンボタンのカラースタイルです。重要なアクションを目立たせ、アクション同士のヒエラルキーを構築する役割があります。
同じビュー内で3つ以上のPrimaryボタンは使用しないでください。
Neutral
デフォルトのカラースタイルです。Primaryと組み合わせて副次的なボタンとして使用することも、単独で使用することもできるアイコンボタンです。
Negative
破壊的なアクションや、ネガティブな結果をもたらす可能性があるアクションを強調するためのスタイルです。
実行することでユーザーのデータが失われる場合などに使用します。
Variantはユーザーへの破壊的影響の大きさに応じて選択してください。
States: 状態
Enable
ユーザーがアイコンボタンを操作する前のデフォルトの状態。
Hover
ユーザーがアイコンボタンにマウスオーバーしている状態。
Active
ユーザーがアイコンボタンを操作している状態。
Focus
ユーザーがタッチ操作や、キーボードや音声による操作を用いてアイコンボタンに注視している状態。
Disabled
システムによってアイコンボタンが非活性化されている状態。ユーザーによる操作は不能です。
Loading
アイコンボタンの押下によって実行されたアクションが進行中であることをユーザーに提示している状態。
Behaviors: 振る舞い
Tooltip
アイコンボタンをホバーすることでツールチップがアイコンボタンの上部に表示されます。アイコンボタンのラベルが非表示になっている場合でもアイコンボタンの意味を伝える役割を持ちます。
Metrics: 寸法
xs
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 24px
- padding Vertical: 4px
- padding Horizontal: 4px
sm
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 32px
- padding Vertical: 6px
- padding Horizontal: 6px
md
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 40px
- padding Vertical: 8px
- padding Horizontal: 8px
lg
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 48px
- padding Vertical: 8px
- padding Horizontal: 8px
Usage: 使い方
コンパクトなスタイルでアクションのトリガーをレイアウトする場合にはアイコンボタンを使用します。アイコンボタンは、オーバーフローメニューや検索を開くなどの開始アクションを表すことや、お気に入りやブックマークなど、オンとオフを切り替えることができるバイナリアクションを表すことができます。
アイコンボタンを使用する場合は Button の用法に準じてください。
Contents: 内容
ボタングループの中ではアイコンの塗りのスタイルを統一します。
ボタングループの中で塗りのスタイルを混合して指定しないでください。
ツールチップがなくてもアクションの内容をユーザーに適切に伝えることができるアイコンを選択してください。
References: 参考文献
www.interaction-design.org
www.nngroup.com
www.sociomedia.co.jp
Change log: 変更履歴
| Date | Changes |
|---|---|
| 2024/11/29 | 初版を公開 |
