Text

Text

セマンティックなタイポグラフィコンポーネントです。Heading / Body / Label の 3 つのバリアントで、一貫したテキストスタイルを適用します。

Props

Prop	型	デフォルト	説明
variant	'body' | 'label' | 'heading'	'body'	テキストの種類
size	バリアントにより異なる	-	テキストサイズ
color	'default' | 'muted' | 'accent' | 'inherit'	'default'	テキストカラー
align	'left' | 'center' | 'right'	-	テキスト揃え
truncate	boolean	false	テキストを省略表示
as	'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'	バリアントによる	HTML 要素の指定
asChild	boolean	false	Radix Slot で子要素に委譲

バリアントとサイズ

Body（本文）

段落・説明文に使用します。デフォルトの HTML 要素は <p>。

サイズ	フォントサイズ	行間	ウェイト
xs	12px	1.5	400
sm	14px	1.5	400
md	16px	1.5	400
lg	18px	1.5	400

Label（ラベル）

フォームラベル・ボタン・ナビゲーションに使用します。デフォルトの HTML 要素は <label>。

サイズ	フォントサイズ	行間	ウェイト
xs	12px	1.25	500
sm	14px	1.25	500
md	16px	1.25	500
lg	18px	1.25	500

Heading（見出し）

ページタイトル・セクション見出しに使用します。デフォルトの HTML 要素は <p>。

サイズ	フォントサイズ	行間	ウェイト
sm	18px	1.375	600
md	20px	1.375	600
lg	24px	1.375	600
xl	30px	1.25	700
2xl	36px	1.25	700

カラー

値	説明
default	ink-black — 標準テキスト
muted	ink-light — セカンダリ・補足テキスト
accent	vermillion — アクセント・強調テキスト
inherit	親要素のカラーを継承

使用例

import { Text } from '@yasmro/schatten'

// 本文
<Text>段落テキストです。</Text>
<Text size="sm" color="muted">補足テキスト</Text>

// 見出し
<Text variant="heading" size="xl" as="h1">ページタイトル</Text>
<Text variant="heading" size="md" as="h2">セクション見出し</Text>

// ラベル
<Text variant="label" size="sm">フォームラベル</Text>

// テキスト省略
<Text truncate>非常に長いテキストが省略表示されます...</Text>