TextLink

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

デザインパターン

特別なテキストリンク

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

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

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

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

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

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

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

Props

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

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

prefix
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

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

suffix
string number false true ReactElement<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