Text
텍스트 스타일 8개와 색 3가지를 적용하는 글자 컴포넌트예요.
변형
대표 variant만 보여 줘요. 전체 조합은 Figma 원본 컴포넌트에서 확인해요. hover, focus는 컴포넌트가 처리해요.
displaydisplay · default
displaytitle · default
displaybody · default
displaybody · muted
displaybody · danger
displaybody-strong · default
displaylabel · default
displaycaption · default
displaymono · default
displaymono-caption · default
사용법
- 제목 단계는 as로보이는 크기(variant)와 문서 구조(as="h2")를 따로 정해요.
- 숫자는 mono수치, ID, 키 값은 mono나 mono-caption이에요.
Props
| prop | 값 | 기본값 |
|---|---|---|
| variant | display · title · body · body-strong · label · caption · mono · mono-caption | body |
| tone | default · muted · danger | default |
| as | p, span, div, h1~h6, label, strong, code | span |
코드
tsx
<Text variant="caption" tone="muted" as="p">키는 만든 직후 한 번만 보여 줘요.</Text>