ガイドライン
Anatomy: 解剖図
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
| 1 | Label | リンクにコンテキストを付与するためのテキスト要素 | — | |
| 2 | Open In New Icon | 新規ウィンドウ・タブで開くことを表すアイコン | — |
Options: 選択肢
isOpenInNew
false
新規ウィンドウ・タブで開かないことを表す状態です。リンクのデフォルトの状態です。
true
新規ウィンドウ・タブで開くことを表す状態です。有効になっている場合、末尾にアイコンが示されます。
States: 状態
Enable
ユーザーがリンクを操作する前のデフォルトの状態。
Hover
ユーザーがリンクにマウスオーバーしている状態。ラベルを操作してホバー状態に切り替えることも可能です。
Focus
ユーザーがタッチ操作や、キーボードや音声による操作を用いてリンクに注視している状態。
Metrics: 寸法
- Vertical Resizing: Hug
- Horizontal Resizing: Fixed
- Item Spacing: 4px
Usage: 使い方
Do
外部サイトへのリンクを設ける場合はラベルの末尾にアイコンを付与してください。
Don’t
アクションを実行するためのトリガーとしてリンクを使用しないでください。トリガーとして使用する場合はボタンコンポーネントを用います。
Contents: 内容
Don’t
リンクテキストは曖昧な表現を避けてください。リンクのみを読み上げた際にも、遷移先や内容が伝わるよう、単独で判断できるテキストにしてください。
References: 参考文献
Change log: 変更履歴
| Date | Changes |
|---|---|
| 2025/06/02 | 常に下線を引く状態とする Disabledな状態を削除 |
| 2025/04/04 | 初版を公開 |
小さな気づきや違和感があれば、
フィードバック