TextLink
aタグの代わりに使用するコンポーネントです。前後にアイコンを差し込めます。またリンクであることを表すために下線を強制します。
TextLinkは、ページを移動するためのリンクです。それ以外の処理を実行するボタンとして使わないでください。
視覚的優先度の低いボタンを表現したい場合は、Tertiaryボタンを使ってください。
特定の役割を示すためにアイコンを使います。これはテキストが異なっていても、同じ挙動であることを示すためです。
テキストリンクの左右にアイコンを配置できます。
SmartHR UIでは、アイコン付き(左)はプレフィックス(prefix props)に、アイコン付き(右)はサフィックス(suffix props)にIconを指定することで表現できます。
アイコンは左右どちらかにのみ指定してください。
テキストリンクを押した移動先の意味・内容を想起させるために使用します。
テキストリンクを押したときの挙動を表現するために使用します。
簡易チェックリスト
弱視・ロービジョンのユーザビリティチェックリスト
特定の役割を示すためにアイコンを使います。これはテキストが異なっていても、同じ挙動であることを示すためです。
テキストリンクで別の画面に移動することで、現在の画面での入力や作業が中断され作業効率が著しく落ちる場合には、新規ウィンドウ(新規タブ)でテキストリンクを開くことを検討します。
- TextLinkは、テキストの右側に 別タブで開く アイコン(
OpenInNewTabIcon)を自動で配置するため、個別に設定する必要はありません。
- リンク先がSmartHRの内部ページ、外部サイトに関わらず表示します。
アイコン付き(左)(プレフィックス)は指定しないでください。
ヘルプセンター別タブで開くを開くテキストリンクはHelpLinkとして提供しています。
一階層上のコンテンツに戻るテキストリンクはスタイリングや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" ComponentClass<any, any> FunctionComponent<any> "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" "map" "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" "filter" "foreignObject" "g" "image" "line" "linearGradient" "marker" "mask" "metadata" "mpath" "path" "pattern" "polygon" "polyline" "radialGradient" "rect" "set" "stop" "switch" "text" "textPath" "tspan" "use" "view"
TextLinkを利用しつつnext/linkなどと併用する場合に指定する