TextLink

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

使用上の注意

ボタンとして使わない

TextLinkは、ページを移動するためのリンクです。それ以外の処理を実行するボタンとして使わないでください。

視覚的優先度の低いボタンを表現したい場合は、Tertiaryボタンを使ってください。

レイアウト

アイコンの有無

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

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

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

アイコン付き（左）

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

アイコン付き（右）

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

デザインパターン

特別なテキストリンク

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

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

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

• TextLinkは、テキストの右側に 新規ウィンドウ アイコン（FaUpRightFromSquareIcon）を自動で配置するため、個別に設定する必要はありません。
  • リンク先がSmartHRの内部ページ、外部サイトに関わらず表示します。
• アイコン付き（左）（プレフィックス）は指定しないでください。

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

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

なお、ヘルプセンターを新規ウィンドウで開く場合には、新規ウィンドウで開くテキストリンクを優先して ヘルプセンター アイコン（FaCircleQuestionIcon）は配置しないでください。

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

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

Props