TextLink

aの代わりに使用するコンポーネントです。前後にアイコンを差し込めます。またリンクであることを表すために下線を強制します。

レイアウト

アイコンの有無

特定の役割を示すためにアイコンを使います。これはテキストが異なっていても、同じ挙動であることを示すためです。

アイコン付きテキストリンク

テキストリンクの左右にアイコンを配置できます。 SmartHR UIでは、アイコン付き（左）はプレフィックス（prefix props）に、アイコン付き（右）はサフィックス（suffix props）にIconを指定することで表現できます。
アイコンは左右どちらかにのみ指定してください。

アイコン付き（左）

テキストリンクを押した移動先の意味・内容を想起させるために使用します。

アイコン付き（右）

テキストリンクを押したときの挙動を表現するために使用します。

デザインパターン

特別なテキストリンク

特定の役割を示すためにアイコンを使います。これはテキストが異なっていても、同じ挙動であることを示すためです。

新規ウィンドウで開くテキストリンク

テキストリンクで別の画面に移動することで、現在の画面での入力や作業が中断され作業効率が著しく落ちる場合には、新規ウィンドウ（新規タブ）でテキストリンクを開くことを検討します。

新規ウィンドウで開くテキストリンクには、テキストの右側に 新規ウィンドウ アイコン（FaUpRightFromSquareIcon）を必ず配置します。リンク先がSmartHRの内部ページ、外部サイトに関わらず表示します。アイコン付き（左）（プレフィックス）は指定しないでください。

ヘルプセンターを開くテキストリンク

ヘルプセンターを開くテキストリンクには、テキストの左側に ヘルプセンター アイコン（FaCircleQuestionIcon）を配置することを推奨します。詳細はヘルプページへの動線を参照してください。アイコン付き（右）（サフィックス）は指定しないでください。

一階層上のコンテンツに戻るテキストリンク

一階層上のコンテンツに戻るテキストリンクはスタイリングやpropsを整えたコンポーネントUpwardLinkとして提供しています。アイコン付き（右）（サフィックス）は指定しないでください。

Props