Text

タイポグラフィのデザイントークンを使ってテキストを表示するためのコンポーネントです。本文や説明文、ラベルテキストにデザイントークン準拠のフォントサイズ・ウェイト・色・行送り・見出しスタイルなどを適用するときに使います。

使用上の注意

入れ子にしたときの出力要素に注意する

デフォルトの出力要素は<span>になるため、入れ子にしたときにValidなHTMLになるように注意してください。

種類

フォントサイズ

size propsで指定できます。値はタイポグラフィのフォントサイズのデザイントークンを参照してください。

ウェイト

weight propsで指定できます。

強調、イタリック体

emphasis props、italic propsで指定できます。

色

color propsで指定できます。値は色の文字のデザイントークンを参照してください。

行送り

leading propsで指定できます。値は行送りのデザイントークンを参照してください。

折り返し

whiteSpace propsで指定できます。

見出しスタイル

styleType propsで指定できます。

Headingの種類に合わせた見た目（フォントサイズ、ウェイト、色）を提供しますが、見出しとして使う場合はTextではなくHeadingを使用してください。

使い方チェックリスト

Text

参照元：使用上の注意 > 入れ子にしたときの出力要素に注意する 「使用上の注意 > 入れ子にしたときの出力要素に注意する」の本文へ移動

• Must

  Text を入れ子にする場合は Valid な HTML になるよう出力要素に注意する

参照元：種類 > 見出しスタイル 「種類 > 見出しスタイル」の本文へ移動

• Must

  見出しとして使う場合は Text ではなく Heading を使う

Props