Text
テキストを表示するためのコンポーネントです。タイポグラフィのデザイントークンを使用しています。
使用上の注意
入れ子にしたときの出力要素に注意する
デフォルトの出力要素は<span>になるため、入れ子にしたときにValidなHTMLになるように注意してください。
種類
フォントサイズ
size propsで指定できます。値はタイポグラフィのフォントサイズのデザイントークンを参照してください。
ウェイト
weight propsで指定できます。
強調、イタリック体
emphasis props、italic propsで指定できます。
色
color propsで指定できます。値は色の文字のデザイントークンを参照してください。
行送り
leading propsで指定できます。値は行送りのデザイントークンを参照してください。
折り返し
whiteSpace propsで指定できます。
見出しスタイル
styleType propsで指定できます。
Headingの種類に合わせた見た目（フォントサイズ、ウェイト、色）を提供しますが、見出しとして使う場合はTextではなくHeadingを使用してください。
Props
size
"XXS" "XS" "S" "M" "L" "XL" "XXL"
color
"TEXT_BLACK" "TEXT_WHITE" "TEXT_GREY" "TEXT_DISABLED" "TEXT_LINK" "inherit"
weight
"normal" "bold"
italic
false true
leading
"NONE" "TIGHT" "NORMAL" "LOOSE"
whiteSpace
"pre" "normal" "nowrap" "pre-line" "pre-wrap"
emphasis
false true
強調するかどうかの真偽値。指定すると em 要素になる
styleType
"screenTitle" "sectionTitle" "blockTitle" "subBlockTitle" "subSubBlockTitle"
見た目の種類
prefixIcon
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal
テキスト左に設置するアイコン
suffixIcon
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal
テキスト右に設置するアイコン
iconGap
0 0.25 0.5 0.75 1 1.25 1.5 2 2.5 3 3.5 4 8 -0.25 -0.5 -0.75 -1 -1.25 -1.5 -2 -2.5 -3 -3.5 -4 -8 "X3S" "XXS" "XS" "S" "M" "L" "XL" "XXL" "X3L"
アイコンと並べるテキストとの溝