Text

汎用テキストコンポーネント。variant / size / weight / color / align を prop で制御。LP や UI で独自 CSS なしにテキストを扱える。

GitHub でソースを見る

プレビュー

Overline：カテゴリラベル

Lead：ページやセクションの導入文。大きめのサイズとミュートカラーで読みやすく。

Body：標準の本文テキストです。デフォルトの variant です。

Caption：補足説明やメタ情報に使う小さめテキスト。

太字テキスト

プライマリカラー

成功カラー

エラーカラー

中央揃え・ミュートカラー

使いどころ

使う場面

  • 本文、補足、注釈など、見出しでない文章
  • variant は body（本文）、lead（導入文）、caption（図表の説明や注釈）、overline（見出しの上の小さなラベル）から選ぶ
  • color は muted や subtle で重要度を下げ、positive、warning、negative で状態を伝える。色だけで伝えず、文言でも伝える
  • 意味のある強調は as="strong"、語調の強調は as="em" で出力する。見た目だけなら weight を使う

使わない場面

  • 節のタイトル。Heading を使い、文書の構造に載せる
  • 大きく目立たせるために size="2xl" を使って見出し代わりにすること。読み上げの見出し一覧に出ず、構造が伝わらない
  • ラベルとして使う場面で as="p" のままにすること。フォーム項目のラベルは FormField か as="label" に htmlFor を付ける
  • key と value を組にして並べる用途。DescriptionList を使う

使い方

<Text variant="lead">サービスの説明文がここに入ります。</Text>
<Text>通常の本文テキスト。</Text>
<Text variant="caption" color="muted">2024年1月1日 公開</Text>
<Text variant="overline">カテゴリ</Text>
<Text weight="bold" color="primary">重要なテキスト</Text>

プロパティ

名前型デフォルト説明
variant"body" | "lead" | "caption" | "overline""body"テキストの用途別スタイル
size"xs" | "sm" | "base" | "lg" | "xl" | "2xl"なしフォントサイズの上書き
weight"normal" | "medium" | "semibold" | "bold"なしフォントウェイトの上書き
color"default" | "muted" | "subtle" | "inherit" | "primary" | "positive" | "warning" | "negative""default"テキストカラー
align"left" | "center" | "right"なしテキスト揃え
as"p" | "span" | "div" | "label" | "small" | "strong" | "em""p"レンダリングする HTML 要素

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

アクセシビリティ

  • 既定は <p>。インラインの文は as="span" にして、<p> の入れ子を避ける
  • color だけで意味を伝えない。negative の文には「エラー」など、色なしでも分かる言葉を入れる
  • size を下げすぎない。xs は補足にとどめ、読ませたい文には base 以上を使う

文言

  • 1 文を短く。長い説明は段落を分け、重要な結論を先に書く

関連するコンポーネント