Text

Text

기본이 되는 텍스트 프리미티브 컴포넌트예요.

출처: 문서

본문

UI에서 가장 기본적인 텍스트 요소예요. 크기, 굵기, 정렬, 줄바꿈, 색상 등을 손쉽게 조절할 수 있어요.

<Text>The quick brown fox jumps over the lazy dog.</Text>

이 컴포넌트는 span 요소를 기반으로 하며, 공통 margin props를 지원해요.

Prop	Type	Default
as	"span" | "div" | "label" | "p"	"span"
asChild	boolean	No default value
size	Responsive<enum>	No default value
weight	Responsive<"light" | "regular" | "medium" | "bold">	No default value
align	Responsive<"left" | "center" | "right">	No default value
trim	Responsive<"normal" | "start" | "end" | "both">	No default value
truncate	boolean	No default value
wrap	Responsive<"wrap" | "nowrap" | "pretty" | "balance">	No default value
color	enum	No default value
highContrast	boolean	No default value

예시 (Examples)

As another element

as prop을 사용해 텍스트를 p, label, div, span으로 렌더링할 수 있어요. 이 prop은 순수하게 의미론적이고 시각적 모습은 바꾸지 않아요.

<Text as="p">This is a <Strong>paragraph</Strong> element.</Text>

<Text as="label">This is a <Strong>label</Strong> element.</Text>

<Text as="div">This is a <Strong>div</Strong> element.</Text>

<Text as="span">This is a <Strong>span</Strong> element.</Text>

Size

size prop으로 텍스트 크기를 제어할 수 있어요. 이 prop은 올바른 줄 높이와 보정용 자간도 함께 제공해요. 텍스트가 커질수록 상대적인 줄 높이와 자간은 줄어들어요.

<Flex direction="column" gap="3">
  <Text size="1">The quick brown fox jumps over the lazy dog.</Text>

  <Text size="2">The quick brown fox jumps over the lazy dog.</Text>

  <Text size="3">The quick brown fox jumps over the lazy dog.</Text>

  <Text size="4">The quick brown fox jumps over the lazy dog.</Text>

  <Text size="5">The quick brown fox jumps over the lazy dog.</Text>

  <Text size="6">The quick brown fox jumps over the lazy dog.</Text>

  <Text size="7">The quick brown fox jumps over the lazy dog.</Text>

  <Text size="8">The quick brown fox jumps over the lazy dog.</Text>

  <Text size="9">The quick brown fox jumps over the lazy dog.</Text>
</Flex>

Size 2–4는 긴 형식의 본문 콘텐츠에 잘 어울리도록 설계됐어요.

<Text as="p" mb="5" size="4">

  The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this "divine" proportion to enhance these attributes in our typography.

</Text>



<Text as="p" mb="5" size="3">

  The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this "divine" proportion to enhance these attributes in our typography.

</Text>



<Text as="p" size="2" color="gray">

  The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this "divine" proportion to enhance these attributes in our typography.

</Text>

Size 1–3은 UI 라벨에 잘 어울리도록 설계됐어요.

<Grid align="center" columns="2" gap="5" p="3">
  <Flex direction="column">
    <Text size="3" weight="bold">
      Get started
    </Text>

    <Text color="gray" size="2">
      Start your next project in minutes
    </Text>
  </Flex>

  <Flex direction="column">
    <Text size="2" weight="bold">
      Get started
    </Text>

    <Text color="gray" size="2">
      Start your next project in minutes
    </Text>
  </Flex>

  <Flex direction="column">
    <Text size="2" weight="bold">
      Get started
    </Text>

    <Text color="gray" size="1">
      Start your next project in minutes
    </Text>
  </Flex>

  <Flex direction="column">
    <Text size="1" weight="bold">
      Get started
    </Text>

    <Text color="gray" size="1">
      Start your next project in minutes
    </Text>
  </Flex>
</Grid>

Weight

weight prop으로 텍스트 굵기를 설정할 수 있어요.

<Text weight="regular" as="div">

  The quick brown fox jumps over the lazy dog.

</Text>



<Text weight="medium" as="div">

  The quick brown fox jumps over the lazy dog.

</Text>



<Text weight="bold" as="div">

  The quick brown fox jumps over the lazy dog.

</Text>

Align

align prop으로 텍스트 정렬을 설정할 수 있어요.

<Text align="left" as="div">Left-aligned</Text>

<Text align="center" as="div">Center-aligned</Text>

<Text align="right" as="div">Right-aligned</Text>

Trim

trim prop으로 텍스트 박스 시작, 끝 또는 양쪽의 리딩 공백을 잘라낼 수 있어요.

이 prop은 곧 나올 half-leading control 스펙과 비슷하지만, 브라우저 간 지원을 위해 내부적으로 흔히 쓰이는 음수 마진 우회 기법을 사용해요.

<Flex direction="column" gap="3">
  <Text
    trim="normal"
    style={{
      background: "var(--gray-a2)",
      borderTop: "1px dashed var(--gray-a7)",
      borderBottom: "1px dashed var(--gray-a7)",
    }}
  >
    Without trim
  </Text>

  <Text
    trim="both"
    style={{
      background: "var(--gray-a2)",
      borderTop: "1px dashed var(--gray-a7)",
      borderBottom: "1px dashed var(--gray-a7)",
    }}
  >
    With trim
  </Text>
</Flex>

리딩을 자르는 것은 카드 같은 "박스형" 컴포넌트에서 세로 간격을 맞출 때 유용해요. 그렇지 않으면 패딩이 좌우보다 위아래가 더 크게 보여요.

<Flex direction="column" gap="3">
  <Box
    style={{
      background: "var(--gray-a2)",
      border: "1px dashed var(--gray-a7)",
    }}
    p="4"
  >
    <Heading mb="1" size="3">
      Without trim
    </Heading>

    <Text>
      The goal of typography is to relate font size, line height, and line width in a proportional
      way that maximizes beauty and makes reading easier and more pleasant.
    </Text>
  </Box>

  <Box
    p="4"
    style={{
      background: "var(--gray-a2)",
      border: "1px dashed var(--gray-a7)",
    }}
  >
    <Heading mb="1" size="3" trim="start">
      With trim
    </Heading>

    <Text trim="end">
      The goal of typography is to relate font size, line height, and line width in a proportional
      way that maximizes beauty and makes reading easier and more pleasant.
    </Text>
  </Box>
</Flex>

기본 trim 값은 Radix Themes가 사용하는 시스템 폰트 스택에 맞춰 설정돼요. 커스텀 폰트를 쓴다면 대응하는 CSS 변수로 trim 값을 조절할 수 있어요.

.radix-themes {
  --default-leading-trim-start: 0.42em;

  --default-leading-trim-end: 0.36em;

  --heading-leading-trim-start: 0.42em;

  --heading-leading-trim-end: 0.36em;
}

Truncate

truncate prop을 사용하면 텍스트가 컨테이너를 넘칠 때 말줄임표(...)로 잘라낼 수 있어요.

<Flex maxWidth="300px">
  <Text truncate>
    The goal of typography is to relate font size, line height, and line width in a proportional way
    that maximizes beauty and makes reading easier and more pleasant.
  </Text>
</Flex>

Wrap

wrap prop으로 텍스트 줄바꿈을 제어할 수 있어요.

<Flex maxWidth="270px">
  <Text wrap="nowrap">
    The goal of typography is to relate font size, line height, and line width in a proportional way
    that maximizes beauty and makes reading easier and more pleasant.
  </Text>
</Flex>

<Flex maxWidth="270px">
  <Text wrap="balance">
    The goal of typography is to relate font size, line height, and line width in a proportional way
    that maximizes beauty and makes reading easier and more pleasant.
  </Text>
</Flex>

<Flex maxWidth="270px">
  <Text wrap="pretty">
    The goal of typography is to relate font size, line height, and line width in a proportional way
    that maximizes beauty and makes reading easier and more pleasant.
  </Text>
</Flex>

text-wrap: pretty는 실험적인 값으로 아직 모든 브라우저에서 지원되지는 않아요. 다만 지원하는 브라우저에서는 점진적 향상(progressive enhancement)으로 사용할 수 있어요.

Color

color prop으로 특정 색상을 지정할 수 있어요. 텍스트 색상은 일반적인 배경색 위에서 최소 Lc 60 APCA 대비를 달성하도록 설계됐어요.

<Flex direction="column">
  <Text color="indigo">The quick brown fox jumps over the lazy dog.</Text>

  <Text color="cyan">The quick brown fox jumps over the lazy dog.</Text>

  <Text color="orange">The quick brown fox jumps over the lazy dog.</Text>

  <Text color="crimson">The quick brown fox jumps over the lazy dog.</Text>
</Flex>

High-contrast

highContrast prop으로 배경과의 색 대비를 높일 수 있어요.

<Flex direction="column">
  <Text color="gray">The quick brown fox jumps over the lazy dog.</Text>

  <Text color="gray" highContrast>
    The quick brown fox jumps over the lazy dog.
  </Text>
</Flex>

With formatting

Text를 포맷팅 컴포넌트와 조합해 콘텐츠에 강조와 구조를 더할 수 있어요.

<Text as="p">
  Look, such a helpful <Link href="#">link</Link>, an <Em>italic emphasis</Em>, a piece of computer{" "}
  <Code>code</Code>, and even a hotkey combination <Kbd>⇧⌘A</Kbd> within the text.
</Text>

With form controls

Text를 Checkbox, RadioGroup, Switch 같은 폼 컨트롤과 조합하면, 텍스트가 여러 줄이어도 컨트롤이 첫 번째 텍스트 줄과 자동으로 가운데 정렬돼요.

<Box maxWidth="300px">
  <Text as="label" size="3">
    <Flex gap="2">
      <Checkbox defaultChecked /> I understand that these documents are confidential and cannot be
      shared with a third party.
    </Flex>
  </Text>
</Box>

더 알아보기 (Learn more)

• 박스형 컴포넌트에서 세로 간격을 정밀하게 맞추려면 trim prop을 활용해 보세요.