TextLink

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

処理中
ドラッグして幅を変更
ドラッグして高さを変更
処理中

デザインパターン

特別なテキストリンク

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

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

新規ウィンドウ(新規タブ)で開くテキストリンクには、テキストの右側新規ウィンドウ アイコン(FaUpRightFromSquareIcon)を必ず配置します。リンク先がSmartHRの内部ページ、外部サイトに関わらず表示します。

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

ヘルプセンターを開くテキストリンクには、テキストの左側ヘルプセンター アイコン(FaCircleQuestionIcon)を配置することを推奨します。詳細はヘルプページへの動線を参照してください。

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

一階層上のコンテンツに戻るテキストリンクはスタイリングやpropsを整えたコンポーネントUpwardLinkとして提供しています。

Props

onClick
(e: MouseEvent<Element, MouseEvent>) => void

リンクをクリックした時に発火するコールバック関数

prefix
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

テキストの前に表示するアイコン

suffix
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

テキストの後ろに表示するアイコン

elementAs
"symbol""object""map""filter""base""a""abbr""address""area""article""aside""audio""b""bdi""bdo""big""blockquote""body""br""button""canvas""caption""center""cite""code""col""colgroup""data""datalist""dd""del""details""dfn""dialog""div""dl""dt""em""embed""fieldset""figcaption""figure""footer""form""h1""h2""h3""h4""h5""h6""head""header""hgroup""hr""html""i""iframe""img""input""ins""kbd""keygen""label""legend""li""link""main""mark""menu""menuitem""meta""meter""nav""noindex""noscript""ol""optgroup""option""output""p""param""picture""pre""progress""q""rp""rt""ruby""s""samp""search""slot""script""section""select""small""source""span""strong""style""sub""summary""sup""table""template""tbody""td""textarea""tfoot""th""thead""time""title""tr""track""u""ul""var""video""wbr""webview""svg""animate""animateMotion""animateTransform""circle""clipPath""defs""desc""ellipse""feBlend""feColorMatrix""feComponentTransfer""feComposite""feConvolveMatrix""feDiffuseLighting""feDisplacementMap""feDistantLight""feDropShadow""feFlood""feFuncA""feFuncB""feFuncG""feFuncR""feGaussianBlur""feImage""feMerge""feMergeNode""feMorphology""feOffset""fePointLight""feSpecularLighting""feSpotLight""feTile""feTurbulence""foreignObject""g""image""line""linearGradient""marker""mask""metadata""mpath""path""pattern""polygon""polyline""radialGradient""rect""set""stop""switch""text""textPath""tspan""use""view"ComponentClass<any, any>FunctionComponent<any>

TextLinkを利用しつつnext/linkなどと併用する場合に指定する

ref
any