リンクテキスト

component

文章の中に置く、別のページへ移動できるリンクです。下線付きで、リンクであることが一目で分かります。色は緑（標準）・ニュートラル・白（inverse、暗い背景用）の 3 種類です。

state

enable / hover（外部リンクアイコン付き）

enable hover

バリエーション

外部リンクアイコンの有無

外部サイトを新規タブで開く例: WAIC のサイトを見る

同一サイト内リンク（アイコンなし）: 同じサイト内のページ

カラー

default（緑）/ neutral（.link-neutral）/ inverse（.link-inverse、暗い背景用）。下線は色によらず常に付く

default neutral neutral hover inverse
リンクテキスト hover

ニュートラルは緑を目立たせたくない補助的なリンク（フッター・メタ情報・表のセル内等）に、inverse は暗い背景（neutral-800 以上・primary-700 以上等）の上に使います。本文中の主要リンクは default（緑）のままにしてください。色を text-* ユーティリティで自作すると hover 色が追従しないため、色はこの 3 択です。

本文サイズへの追従

同じ .link が周囲の typo-* サイズに自動で揃う

typo-small (14px) の本文に置くと リンクも 14px になり、行が揃います。

typo-medium (16px) の本文に置くと リンクも 16px になります。

使用例

本文中に埋め込む

詳しくは プライバシーポリシー をご確認ください。設定は アカウント設定 から変更できます。

リンクは必ず本文とフォントサイズを揃える。 .link は font-size / line-height を周囲の本文から inherit するため、置いた本文のサイズ（typo-small / typo-medium 等）に自動で追従します。リンクだけ別サイズにしないでください。末尾の外部リンクアイコンも 1em で文字サイズに連動します。

機能

このコンポーネントの用途

a 要素のテキストリンクの正本コンポーネント。置き場所を問わず（本文・フッター・表セル・フォーム脇の補助導線）これで組む。
パスワード再設定・利用規約など「主題でない脇役のリンク」も同様。素の a や独自クラスで再実装しない。
結果が「移動」なら link、「処理の実行」なら button。
例外: 完了画面・空状態などの「画面の主導線（CTA）」は、移動でも link でなく
a タグ + btn で目立たせる（詳細は button の機能・使用法を参照）。