Text

Design Systemに則ったTypographyのスタイルを提供

Example#

Name	Type	Default	Description
as	`HTMLの要素名`	`'p'`	レンダリングされる要素を指定。renderとは違い、HTMLのネイティブ要素に限定また、指定した要素に応じて対応する属性も合わせて使用可能に
bold optional	`boolean`	`-`	太字とするかどうか
children optional	`ReactNode`	`-`	表示するテキスト pやdivなどを含めないでください（文法的にNGです）
color	`'main'` `'sub'` `'link'`	`'main'`	文字色の抽象値
data-* optional	`string`	`-`	Custom data attributes
id optional	`string`	`-`	HTMLのid属性
leading optional	`'typeごとの値'`	`-`	行送りの抽象値（`line-height`）
noWrap optional	`boolean`	`-`	領域が狭い場合でも折り返えさない
render optional	`ReactElement`	`-`	レンダリングされる要素を変更。フレームワークのリンクコンポーネントを想定しています指定した場合、colorがデフォルトでlinkになります
size	`'typeごとの値'`	`md`	フォントサイズの抽象値
textAlign optional	`left` `center` `right`	`-`	テキストの配置。指定しない場合、親要素の配置を継承
type	`'body'` `'heading'` `'button'`	`body`	テキストの種類

Typography トークンに基づいたスタイルを提供します。

テキストのスタイルに困った場合、シンプルに<Text>でテキストを囲ってください
- propsを指定しなくとも、本文で使用するスタイル（type='body'、size='md'）がデフォルトで適用されています
デフォルトでは、<p>要素としてレンダリングされます

例えば一部の単語を強調したいケースなどがあります。<Text>をネストし、as propでspanを指定、装飾したいpropを追加します。

<Text type="note" size="lg">
  <Text as="span" type="note" size="lg" color="red" bold>
    Alert:
  </Text>
  Please fill in all fields
</Text>

実際の動作例はtext in textを参照してください。

おおむね<p>要素を使用すれば問題有りません
ただし、いくつかのケースで問題があります
- <p>要素に<p>要素を内包できません
  - ネストした場合、ブラウザの修復により構造が崩れる可能性があります
- <button>のような、<p>などのフローコンテンツを子に持てない要素が存在します¹
- これらの解決策として、as propでレンダリングされる要素を変更します。spanが良いでしょう

<p>はブロックレベル要素²のため水平方向の領域を占有します
デザイン上、不都合がある可能性があります
いくつかの解決策が考えられます
- aspropでインラインレベルの要素に変更
- CSSでdisplay: inlineなどを指定
- <Text>の親要素のdisplayにflexやgridを指定

代表的なもの列挙します。 <div>や<span>を使う前に、以下のマークアップを検討してください。