React
Text
텍스트를 표시하는 기본 타이포그래피 컴포넌트입니다. 일관된 글꼴 스타일과 크기를 적용하여 텍스트를 렌더링할 때 사용됩니다.
import { Flex, Text } from "@seed-design/react";
export default function TextPreview() {
return (
<Flex direction="column" gap="x2">
<Text color="fg.neutral" textStyle="t1Regular">
t1Regular
</Text>
<Text color="fg.neutral" textStyle="t2Regular">
t2Regular
</Text>
<Text color="fg.neutral" textStyle="t3Regular">
t3Regular
</Text>
<Text color="fg.neutral" textStyle="t4Regular">
t4Regular
</Text>
<Text color="fg.neutral" textStyle="t5Regular">
t5Regular
</Text>
<Text color="fg.neutral" textStyle="t6Bold">
t6Bold
</Text>
<Text color="fg.neutral" textStyle="t7Bold">
t7Bold
</Text>
<Text color="fg.neutral" textStyle="t8Bold">
t8Bold
</Text>
<Text color="fg.neutral" textStyle="t9Bold">
t9Bold
</Text>
<Text color="fg.neutral" textStyle="t10Bold">
t10Bold
</Text>
<Text color="fg.neutral" textStyle="t11Bold">
t11Bold
</Text>
<Text color="fg.neutral" textStyle="t12Bold">
t12Bold
</Text>
<Text color="fg.neutral" textStyle="t13Bold">
t13Bold
</Text>
<Text color="fg.neutral" textStyle="t14Bold">
t14Bold
</Text>
</Flex>
);
}Usage
import { Text } from "@seed-design/react";<Text />Props
Prop
Type
Examples
Text Styles
Figma의 Text Style과 대응되는 textStyle 속성을 사용하는 것이 기본 방법입니다. textStyle은 글꼴 크기, 줄 간격, 글꼴 굵기를 한 번에 설정합니다.
import { Flex, Text } from "@seed-design/react";
export default function TextTextStyles() {
return (
<Flex direction="column" gap="x2">
<Text color="fg.neutral" textStyle="t1Regular">
t1Regular
</Text>
<Text color="fg.neutral" textStyle="t2Regular">
t2Regular
</Text>
<Text color="fg.neutral" textStyle="t3Regular">
t3Regular
</Text>
<Text color="fg.neutral" textStyle="t4Regular">
t4Regular
</Text>
<Text color="fg.neutral" textStyle="t5Regular">
t5Regular
</Text>
<Text color="fg.neutral" textStyle="t6Bold">
t6Bold
</Text>
<Text color="fg.neutral" textStyle="t7Bold">
t7Bold
</Text>
<Text color="fg.neutral" textStyle="t8Bold">
t8Bold
</Text>
<Text color="fg.neutral" textStyle="t9Bold">
t9Bold
</Text>
<Text color="fg.neutral" textStyle="t10Bold">
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">
t1
</Text>
<Text color="fg.neutral" fontSize="t2">
t2
</Text>
<Text color="fg.neutral" fontSize="t3">
t3
</Text>
<Text color="fg.neutral" fontSize="t4">
t4
</Text>
<Text color="fg.neutral" fontSize="t5">
t5
</Text>
<Text color="fg.neutral" fontSize="t6">
t6
</Text>
<Text color="fg.neutral" fontSize="t7">
t7
</Text>
<Text color="fg.neutral" fontSize="t8">
t8
</Text>
<Text color="fg.neutral" fontSize="t9">
t9
</Text>
<Text color="fg.neutral" fontSize="t10">
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">
regular
</Text>
<Text color="fg.neutral" fontSize="t5" fontWeight="medium">
medium
</Text>
<Text color="fg.neutral" fontSize="t5" fontWeight="bold">
bold
</Text>
</Flex>
);
}Text Decoration Lines
textDecorationLine 속성을 사용하여 텍스트에 밑줄 또는 취소선을 추가할 수 있습니다.
textDecorationLine="underline"을 사용하기 전 읽어보기
- 링크가 아닌 텍스트를 강조하기 위해 밑줄을 적용할 때는 사용자 경험을 고려해야 합니다. 밑줄이 있는 텍스트는 링크로 인식될 수 있으므로, 혼동을 피하기 위해 적절한 상황에서만 사용해야 합니다.
- 본문 밖 영역에서 인라인 텍스트를 링크 용도로 사용하고자 하는 경우 ActionButton을
variant="ghost" bleedX="asPadding" bleedY="asPadding"옵션으로 사용하는 것을 고려해보세요.
import { Flex, Text } from "@seed-design/react";
export default function TextTextDecorationLines() {
return (
<Flex direction="column" gap="x2">
<Text color="fg.neutral" fontSize="t5" textDecorationLine="underline">
underline
</Text>
<Text color="fg.neutral" fontSize="t5" textDecorationLine="line-through">
line-through
</Text>
</Flex>
);
}Max Lines
maxLines 속성을 사용하여 텍스트가 차지하는 최대 줄 수를 제한할 수 있습니다. 지정된 줄 수를 초과하는 텍스트는 생략 부호(ellipsis) … 로 표시됩니다.
import { Flex, Text } from "@seed-design/react";
export default function TextMaxLines() {
return (
<Flex direction="column" gap="x2" width="full">
<Text color="fg.neutral" fontSize="t5" maxLines={1}>
maxLines=1 Aliquip pariatur adipisicing elit consectetur velit commodo Lorem nulla eu.
Occaecat sint voluptate ut dolore eiusmod minim qui reprehenderit. Do aliquip tempor ipsum
aliqua enim. Incididunt irure do ullamco esse sit enim mollit nisi anim laboris do. Ut
fugiat aliquip velit eiusmod ad incididunt. Consequat qui quis in ad culpa officia eu in
Lorem. Elit voluptate est veniam aliqua magna Lorem proident incididunt amet aliquip.
Aliquip sint sit ex eiusmod sint. Eiusmod incididunt consequat fugiat.
</Text>
<Text color="fg.neutral" fontSize="t5" maxLines={2}>
maxLines=2 Aliquip pariatur adipisicing elit consectetur velit commodo Lorem nulla eu.
Occaecat sint voluptate ut dolore eiusmod minim qui reprehenderit. Do aliquip tempor ipsum
aliqua enim. Incididunt irure do ullamco esse sit enim mollit nisi anim laboris do. Ut
fugiat aliquip velit eiusmod ad incididunt. Consequat qui quis in ad culpa officia eu in
Lorem. Elit voluptate est veniam aliqua magna Lorem proident incididunt amet aliquip.
Aliquip sint sit ex eiusmod sint. Eiusmod incididunt consequat fugiat.
</Text>
<Text color="fg.neutral" fontSize="t5" maxLines={3}>
maxLines=3 Aliquip pariatur adipisicing elit consectetur velit commodo Lorem nulla eu.
Occaecat sint voluptate ut dolore eiusmod minim qui reprehenderit. Do aliquip tempor ipsum
aliqua enim. Incididunt irure do ullamco esse sit enim mollit nisi anim laboris do. Ut
fugiat aliquip velit eiusmod ad incididunt. Consequat qui quis in ad culpa officia eu in
Lorem. Elit voluptate est veniam aliqua magna Lorem proident incididunt amet aliquip.
Aliquip sint sit ex eiusmod sint. Eiusmod incididunt consequat fugiat.
</Text>
</Flex>
);
}User Select
userSelect 속성을 사용하여 사용자가 텍스트를 선택할 수 있는지 여부를 제어할 수 있습니다.
import { Flex, Text } from "@seed-design/react";
export default function TextUserSelect() {
return (
<Flex direction="column" gap="x2">
<Text color="fg.neutral" fontSize="t5" userSelect="auto">
auto
</Text>
<Text color="fg.neutral" fontSize="t5" userSelect="none">
none
</Text>
<Text color="fg.neutral" fontSize="t5" userSelect="text">
text
</Text>
</Flex>
);
}Static
폰트 스케일링에 반응하지 않는 static 토큰을 활용하는 텍스트 스타일을 적용할 수 있습니다.
import { Flex, Text } from "@seed-design/react";
export default function TextStatic() {
return (
<Flex direction="column" gap="x2">
<Text color="fg.neutral" textStyle="t1StaticRegular">
t1StaticRegular
</Text>
<Text color="fg.neutral" textStyle="t2StaticRegular">
t2StaticRegular
</Text>
<Text color="fg.neutral" textStyle="t3StaticRegular">
t3StaticRegular
</Text>
<Text color="fg.neutral" textStyle="t4StaticRegular">
t4StaticRegular
</Text>
<Text color="fg.neutral" textStyle="t5StaticRegular">
t5StaticRegular
</Text>
<Text color="fg.neutral" textStyle="t6StaticBold">
t6StaticBold
</Text>
<Text color="fg.neutral" textStyle="t7StaticBold">
t7StaticBold
</Text>
<Text color="fg.neutral" textStyle="t8StaticBold">
t8StaticBold
</Text>
<Text color="fg.neutral" textStyle="t9StaticBold">
t9StaticBold
</Text>
<Text color="fg.neutral" textStyle="t10StaticBold">
t10StaticBold
</Text>
</Flex>
);
}White Space
whiteSpace prop은 maxLines prop을 사용하지 않을 때만 적용됩니다.
import { Box, Text, VStack } from "@seed-design/react";
const sampleText = `이것은 여러 개 의
공백, 줄바꿈과
들여쓰기를 포함한 샘플 텍스트입니다. 각각의 white-space 속성\n값이 어떻게 작동하는지 보여줍니다.`;
export default function TextWhiteSpace() {
return (
<VStack gap="x4" width="full">
{(["normal", "nowrap", "pre", "pre-wrap", "pre-line", "break-spaces"] as const).map(
(value) => (
<VStack gap="x2" key={value}>
<Text textStyle="t4Bold">{value}</Text>
<Box width="full" padding="x4" borderRadius="r2" bg="bg.neutralWeak" overflowX="auto">
<Text whiteSpace={value}>{sampleText}</Text>
</Box>
</VStack>
),
)}
</VStack>
);
}Last updated on