Text
이름 붙은 텍스트 역할을 어떤 요소에나 입히는 타이포그래피 프리미티브예요.
핵심 속성
| 속성 | 값 | 기본값 |
|---|---|---|
variant | caption, label, body, bodySm, code, headingSm, headingMd, headingLg, display, displayLg | body |
color | default, muted, placeholder, inverse, primary, info, success, warning, danger | 상속 |
as | 모든 요소 타입 | span |
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/text.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRText } from '@tinyrack/ui/components/text';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
타입 역할 고유 링크
의미에 맞는 역할을 먼저 고르고, as 프롭으로 요소를 지정해 제목의 시맨틱을 유지하세요.
시맨틱 색상 고유 링크
의미에 따라 색상 토큰을 고르고, color를 지정하지 않으면 주변 텍스트 색을 상속해요.
정렬과 말줄임 고유 링크
논리 정렬은 텍스트 방향을 따르고, truncate는 넘치는 한 줄을 말줄임으로 잘라요.
API
옵션
| Prop | 타입 | 기본값 | 용도 |
|---|---|---|---|
variant | 'caption' | 'label' | 'body' | 'bodySm' | 'code' | 'headingSm' | 'headingMd' | 'headingLg' | 'display' | 'displayLg' | 'body' | 디자인 토큰의 이름 붙은 타입 역할을 선택해요. |
as | ElementType | 'span' | 시각적 역할은 그대로 두고 렌더링할 요소만 바꿔요. |
color | 'default' | 'muted' | 'placeholder' | 'inverse' | 'primary' | 'info' | 'success' | 'warning' | 'danger' | 상속 | 시맨틱 색상 토큰을 적용하고, 지정하지 않으면 부모 색을 상속해요. |
align | 'start' | 'center' | 'end' | 상속 | 현재 방향에 맞는 논리 텍스트 정렬을 지정해요. |
truncate | boolean | false | 넘치는 한 줄을 말줄임(…)으로 잘라요. |
weight | 'regular' | 'medium' | 'heading' | 'bold' | 'strong' | 역할 기본값 | variant의 기본 굵기를 덮어써요. |
HTML과 접근성
TRText는 기본적으로 span을 렌더링하고 네이티브 속성, 이벤트, 스타일, React 19 ref를 전달해요. as로 시각적 variant와 무관하게 p, 제목, label 같은 시맨틱 요소를 렌더링해 제목이 문서 구조를 유지하도록 하세요. TRTextProps, TRTextVariant, TRTextColor, TRTextAlign, TRTextWeight 타입을 내보내요. 인스턴스별 재정의는 --tr-text-* 커스텀 속성으로 할 수 있어요.