typography
Text
多様な要素（p・span・div・label）として描画できるテキストプリミティブ。サイズ・ウェイト・カラー・テキスト省略を制御可能。
インポート
import { Text } from '@stella-ds/react'Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
| size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Font size preset |
| weight | 'normal' | 'medium' | 'semibold' | 'bold' | 'normal' | Font weight |
| color | 'primary' | 'secondary' | 'disabled' | 'primary' | Text color via starlight tokens |
| align | 'left' | 'center' | 'right' | 'left' | Text alignment |
| as | 'p' | 'span' | 'div' | 'label' | 'p' | HTML element to render |
| asChild | boolean | false | Radix Slot pattern |
| truncate | boolean | false | Truncate overflow with ellipsis |
Preview
Large Bold
Medium Medium
Small Secondary
Extra Small Disabled
This is a very long text that will be truncated with an ellipsis
使用例
Basic
<Text size="lg" weight="medium">Body copy</Text>
<Text as="span" color="secondary" size="sm">Caption text</Text>
<Text truncate>Long text that gets truncated...</Text>