リンクテキスト

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 で文字サイズに連動します。

機能

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

コンテンツがナビゲーション可能であることを示すインラインリンク。
結果が「移動」なら link、「処理の実行」なら button。