Text

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.

다람쥐 헌 쳇바퀴에 타고파다람쥐 헌 쳇바퀴에 타고파다람쥐 헌 쳇바퀴에 타고파다람쥐 헌 쳇바퀴에 타고파다람쥐 헌 쳇바퀴에 타고파다람쥐 헌 쳇바퀴에 타고파다람쥐 헌 쳇바퀴에 타고파다람쥐 헌 쳇바퀴에 타고파다람쥐 헌 쳇바퀴에 타고파다람쥐 헌 쳇바퀴에 타고파

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

export default function TextPreview() {
  return (
    <Flex direction="column" gap="x2">
      <Text color="fg.neutral" textStyle="t1Regular">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" textStyle="t2Regular">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" textStyle="t3Regular">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" textStyle="t4Regular">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" textStyle="t5Regular">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" textStyle="t6Bold">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" textStyle="t7Bold">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" textStyle="t8Bold">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" textStyle="t9Bold">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" textStyle="t10Bold">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
    </Flex>
  );
}

Usage

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

<Text />

Props

Prop	Type	Default
`as?`	`"dt" \| "dd" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "span" \| "strong" \| "legend"`	`"span"`
`color?`	`ScopedColorFg \| ScopedColorPalette`	-
`fontSize?`	`"t1" \| "t2" \| "t3" \| "t4" \| "t5" \| "t6" \| "t7" \| "t8" \| "t9" \| "t10" \| "t2Static" \| "t5Static" \| "t6Static"`	-
`lineHeight?`	`"t1" \| "t2" \| "t3" \| "t4" \| "t5" \| "t6" \| "t7" \| "t8" \| "t9" \| "t10"`	-
`fontWeight?`	`"regular" \| "medium" \| "bold"`	-
`maxLines?`	`number`	-
`align?`	`"left" \| "center" \| "right"`	-
`textStyle?`	`"screenTitle" \| "articleBody" \| "t1Regular" \| "t1Medium" \| "t1Bold" \| "t2Regular" \| "t2Medium" \| "t2Bold" \| "t3Regular" \| "t3Medium" \| "t3Bold" \| "t4Regular" \| "t4Medium" \| "t4Bold" \| ... 12 more ...`	`t5Regular`
`textDecorationLine?`	`"none" \| "line-through"`	`none`

Examples

Text Styles

Figma의 Text Style과 대응되는 textStyle 속성을 사용하는 것이 기본 방법입니다.

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

export default function TextTextStyles() {
  return (
    <Flex direction="column" gap="x2">
      <Text color="fg.neutral" textStyle="t1Regular">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" textStyle="t2Regular">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" textStyle="t3Regular">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" textStyle="t4Regular">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" textStyle="t5Regular">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" textStyle="t6Bold">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" textStyle="t7Bold">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" textStyle="t8Bold">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" textStyle="t9Bold">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" textStyle="t10Bold">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
    </Flex>
  );
}

Font Sizes

세밀한 제어가 필요한 경우 fontSize 및 lineHeight 속성을 각각 사용할 수 있습니다.

lineHeight 속성은 fontSize에 대응되는 기본값으로 설정되며, lineHeight 속성으로 변경이 가능합니다.

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

export default function TextFontSizes() {
  return (
    <Flex direction="column" gap="x2">
      <Text color="fg.neutral" fontSize="t1">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" fontSize="t2">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" fontSize="t3">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" fontSize="t4">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" fontSize="t5">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" fontSize="t6">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" fontSize="t7">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" fontSize="t8">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" fontSize="t9">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" fontSize="t10">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
    </Flex>
  );
}

Font Weights

세밀한 제어가 필요한 경우 fontWeight 속성을 사용할 수 있습니다.

다람쥐 헌 쳇바퀴에 타고파다람쥐 헌 쳇바퀴에 타고파다람쥐 헌 쳇바퀴에 타고파

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

export default function TextFontWeights() {
  return (
    <Flex direction="column" gap="x2">
      <Text color="fg.neutral" fontSize="t5" fontWeight="regular">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" fontSize="t5" fontWeight="medium">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
      <Text color="fg.neutral" fontSize="t5" fontWeight="bold">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
    </Flex>
  );
}

Line Through

textDecorationLine 속성을 사용하여 텍스트에 취소선을 추가할 수 있습니다.

다람쥐 헌 쳇바퀴에 타고파

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

export default function TextLineThrough() {
  return (
    <Flex direction="column" gap="x2">
      <Text color="fg.neutral" textStyle="t5Regular" textDecorationLine="line-through">
        다람쥐 헌 쳇바퀴에 타고파
      </Text>
    </Flex>
  );
}