Typo

시맨틱 타이포그래피 컴포넌트. heading, body, caption 변형을 지원합니다.

개요

Typo는 디자인 토큰의 시맨틱 타이포그래피를 적용하는 컴포넌트입니다. variant prop으로 heading, body, caption 스타일을 선택하며, $css prop을 통해 rainbow-sprinkles 스타일을 함께 사용할 수 있습니다. 기본 요소는 <p>이고, render prop으로 변경할 수 있습니다.

Usage

기본 사용법

import { Typo } from '@featuring-corp/components';

<Typo variant="$heading-3">제목 텍스트</Typo>
<Typo variant="$body-1">본문 텍스트입니다.</Typo>
<Typo variant="$caption-1">캡션 텍스트</Typo>

render prop으로 요소 변경

기본 요소는 <p>입니다. render prop으로 적절한 시맨틱 요소를 지정할 수 있습니다.

import { Typo } from '@featuring-corp/components';

<Typo render={<h1 />} variant="$heading-5">페이지 제목</Typo>
<Typo render={<h2 />} variant="$heading-4">섹션 제목</Typo>
<Typo render={<span />} variant="$caption-2">작은 캡션</Typo>

$css prop과 함께 사용

$css prop을 통해 rainbow-sprinkles 스타일을 적용할 수 있습니다.

import { Typo } from '@featuring-corp/components';

<Typo variant="$heading-3" $css={{ color: '$text-1', marginBottom: '$spacing-200' }}>
  스타일된 제목
</Typo>

<Typo
  variant="$body-2"
  $css={{ color: '$text-3', padding: '$spacing-400', bgColor: '$background-2', rounded: '$radius-100' }}
>
  배경이 있는 본문
</Typo>

Props

공통 Props — $css, render, className, style는 모든 서브컴포넌트에서 지원됩니다. useRenderComponent 가이드 →

<p> 요소의 모든 네이티브 속성을 지원합니다. render prop으로 다른 요소를 렌더링할 수 있습니다.

Prop

Type

TypoVariant

Prop

Type

타이포그래피 토큰 참조

각 variant에 대응하는 CSS 값은 Typography 토큰 문서를 참고하세요.

On this page