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