TextLink
a
タグの代わりに使用するコンポーネントです。前後にアイコンを差し込めます。またリンクであることを表すために下線を強制します。
TextLink
は、ページを移動するためのリンクです。それ以外の処理を実行するボタンとして使わないでください。
視覚的優先度の低いボタンを表現したい場合は、Button variant=“text”を使ってください。
特定の役割を示すためにアイコンを使います。これはテキストが異なっていても、同じ挙動であることを示すためです。
テキストリンクの左右にアイコンを配置できます。
SmartHR UIでは、アイコン付き(左)
はプレフィックス(prefix
props)に、アイコン付き(右)
はサフィックス(suffix
props)にIconを指定することで表現できます。
アイコンは左右どちらかにのみ指定してください。
テキストリンクを押した移動先の意味・内容を想起させるために使用します。
テキストリンクを押したときの挙動を表現するために使用します。
特定の役割を示すためにアイコンを使います。これはテキストが異なっていても、同じ挙動であることを示すためです。
テキストリンクで別の画面に移動することで、現在の画面での入力や作業が中断され作業効率が著しく落ちる場合には、新規ウィンドウ(新規タブ)でテキストリンクを開くことを検討します。
- TextLinkは、テキストの右側に 新規ウィンドウ アイコン(
FaUpRightFromSquareIcon
)を自動で配置するため、個別に設定する必要はありません。
- リンク先がSmartHRの内部ページ、外部サイトに関わらず表示します。
アイコン付き(左)
(プレフィックス)は指定しないでください。
- ヘルプセンターを開くテキストリンクには、テキストの左側に ヘルプセンター アイコン(
FaCircleQuestionIcon
)を配置することを推奨します。
アイコン付き(右)
(サフィックス)は指定しないでください。
なお、ヘルプセンターを新規ウィンドウで開く場合には、新規ウィンドウで開くテキストリンクを優先して ヘルプセンター アイコン(FaCircleQuestionIcon
)は配置しないでください。
一階層上のコンテンツに戻るテキストリンクはスタイリングやpropsを整えたコンポーネントUpwardLinkとして提供しています。アイコン付き(右)
(サフィックス)は指定しないでください。
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" "input" "a" "abbr" "address" "area" "article" "aside" "audio" "b" "base" "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" "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などと併用する場合に指定する