Text

Text 컴포넌트는 Lynx에서 SEED 타이포그래피 토큰을 적용해 텍스트를 렌더링하는 컴포넌트입니다.

Installation

npm install @seed-design/lynx-react @seed-design/lynx-css

Usage

import { Text } from "@seed-design/lynx-react";

export function App() {
  return (
    <Text textStyle="t5Regular" color="fg.neutral">
      기본 텍스트
    </Text>
  );
}

Text는 Lynx 네이티브 <text>를 렌더링합니다. textStyle은 Figma Text Style에 대응되는 SEED 타이포그래피 토큰을 한 번에 적용합니다.

Lynx에서는 텍스트가 반드시 <text> 요소 안에 있어야 합니다. Text는 이 제약을 숨기지 않고, Lynx에 맞는 native text element를 직접 렌더링합니다.

Props

Prop

Type

color?(string & {}) | ScopedColorFg | ScopedColorPalette | undefined

fontSize?

(string & {}) | "t2" | "t3" | "t4" | "t1" | "t5" | "t6" | "t7" | "t8" | "t9" | "t10" | "t1Static" | "t2Static" | "t3Static" | "t4Static" | "t5Static" | "t6Static" | "t7Static" | "t8Static" | "t9Static" | "t10Static" | undefined

lineHeight?

(string & {}) | "t2" | "t3" | "t4" | "t1" | "t5" | "t6" | "t7" | "t8" | "t9" | "t10" | "t1Static" | "t2Static" | "t3Static" | "t4Static" | "t5Static" | "t6Static" | "t7Static" | "t8Static" | "t9Static" | "t10Static" | undefined

fontWeight?"medium" | "bold" | "regular" | undefined

textStyle?TextStyle | undefined

align?"left" | "right" | "center" | undefined

style?CSSProperties | undefined

children?React.ReactNode

className?string | undefined

Text Styles

<Text textStyle="screenTitle" color="fg.neutral">
  screenTitle
</Text>

<Text textStyle="t5Bold" color="fg.critical">
  t5Bold
</Text>

더 구체적인 조정이 필요하면 fontSize, lineHeight, fontWeight, align을 사용할 수 있습니다.

<Text fontSize="t7" lineHeight="t7" fontWeight="bold" align="center">
  직접 지정한 타이포그래피 값
</Text>

fontSize만 지정하고 lineHeight를 생략하면 같은 단계의 line-height 토큰을 함께 사용합니다.

웹 버전과의 차이

Lynx Text는 React Text와 다음과 같은 차이가 있습니다.

as, asChild를 지원하지 않습니다. 항상 Lynx 네이티브 <text>를 렌더링합니다.
maxLines, whiteSpace, userSelect, textDecorationLine은 아직 제공하지 않습니다.
CSS inherit에 기대는 웹 .seed-text 패턴을 사용하지 않고, color, fontSize, lineHeight, fontWeight, textAlign을 직접 object style로 적용합니다.