← Kitchen Sink로 돌아가기

Typography

피그마 디자인 토큰을 사용하는 텍스트 컴포넌트 데모

기본 사용법

기본값은 size="default", weight="regular"입니다.

기본 텍스트 (size="default", weight="regular")
<Typography>기본 텍스트</Typography> // → text-heading-16-regular

Size Props

size prop을 사용하여 타이포그래피 사이즈를 설정할 수 있습니다.

Large (lg) - text-heading-20
Default - text-heading-16
Small (sm) - text-body-14
Extra Small (xs) - text-body-13
Extra Extra Small (xxs) - text-body-12
<Typography size="lg">Large</Typography> <Typography size="default">Default</Typography> <Typography size="sm">Small</Typography> <Typography size="xs">Extra Small</Typography> <Typography size="xxs">Extra Extra Small</Typography>
Size 값 생성되는 클래스 설명
lg text-heading-20 큰 제목 (20px)
default text-heading-16 기본 제목 (16px, 기본값)
sm text-body-14 본문 (14px)
xs text-body-13 작은 텍스트 (13px)
xxs text-body-12 매우 작은 텍스트 (12px)

말줄임 처리

1줄 말줄임 (truncate)
이것은 매우 긴 텍스트입니다. 1줄 말줄임 처리가 적용되어야 합니다.
<Typography class="text-body-14-regular text-primary-01 truncate">긴 텍스트...</Typography>
2줄 말줄임 (line-clamp-2)
이것은 매우 긴 텍스트입니다. 2줄 말줄임 처리가 적용되어야 합니다.
<Typography size="xxs" weight="regular" class="text-primary-01 line-clamp-2">긴 텍스트...</Typography>

Size와 Weight 조합

size와 weight props를 함께 사용하여 타이포그래피 클래스를 자동으로 생성할 수 있습니다.

Large Bold
Large Medium
Large Regular
Default Bold
Default Medium
Default Regular
Small Bold
Small Medium
Small Regular
Extra Small Bold
Extra Small Medium
Extra Small Regular
Extra Extra Small Bold
Extra Extra Small Medium
Extra Extra Small Regular
<Typography size="lg" weight="bold">Large Bold</Typography> <Typography size="default" weight="medium">Default Medium</Typography> <Typography size="sm" weight="regular">Small Regular</Typography> <Typography size="xs" weight="medium">Extra Small Medium</Typography> <Typography size="xxs" weight="regular">Extra Extra Small Regular</Typography>

className 오버라이드

className에 타이포그래피 클래스가 이미 있으면 size와 weight로 자동 생성된 클래스는 적용되지 않습니다.

className에 타이포그래피 클래스가 있으면 size/weight 무시
<Typography size="sm" class="text-body-12-medium">텍스트</Typography> // → text-body-12-medium (size="sm" 무시됨)

Props

Prop Type Default Description
tag keyof HTMLElementTagNameMap "div" HTML 태그
text string - 텍스트 내용 (선택적, slot도 지원). <br> 태그는 안전하게 렌더링되며, 다른 HTML은 이스케이프됩니다.
size 'lg' | 'default' | 'sm' | 'xs' | 'xxs' "default" 타이포그래피 사이즈.
  • lg → text-heading-20 (20px)
  • default → text-heading-16 (16px)
  • sm → text-body-14 (14px)
  • xs → text-body-13 (13px)
  • xxs → text-body-12 (12px)
weight 'bold' | 'medium' | 'regular' "regular" 폰트 굵기. size와 조합하여 text-heading-16-bold 형태의 클래스를 자동 생성합니다.
class string - Tailwind 클래스. className에 text-heading-XX-XX 또는 text-body-XX-XX 형태의 타이포그래피 클래스가 이미 있으면 size와 weight로 자동 생성된 클래스는 적용되지 않습니다.