Text
Text 컴포넌트로 Semantic HTML 생성할 수 있습니다. Semantic Tag와 Typography Token Style을 별도로 지정할 수 있습니다. (* Typography Token Style은 Foundation의 Typography 팔레트를 참고해주세요.)피그마에서 제공하지 않는 컴포넌트입니다. React에서만 확인할 수 있습니다.
Import
import { Text } from '@goorm-dev/vapor-components';Examples
Props
| name | description | default |
|---|---|---|
| as | HTML tag | span |
| role | HTML role | |
| childrenrequired | React children | |
| color | Text color gray-000gray-050gray-100gray-200gray-300gray-400gray-500gray-600gray-700gray-800gray-900gray-950red-050red-100red-200red-300red-400red-500red-600red-700red-800red-900pink-050pink-100pink-200pink-300pink-400pink-500pink-600pink-700pink-800pink-900grape-050grape-100grape-200grape-300grape-400grape-500grape-600grape-700grape-800grape-900violet-050violet-100violet-200violet-300violet-400violet-500violet-600violet-700violet-800violet-900blue-050blue-100blue-200blue-300blue-400blue-500blue-600blue-700blue-800blue-900cyan-050cyan-100cyan-200cyan-300cyan-400cyan-500cyan-600cyan-700cyan-800cyan-900green-050green-100green-200green-300green-400green-500green-600green-700green-800green-900lime-050lime-100lime-200lime-300lime-400lime-500lime-600lime-700lime-800lime-900yellow-050yellow-100yellow-200yellow-300yellow-400yellow-500yellow-600yellow-700yellow-800yellow-900orange-050orange-100orange-200orange-300orange-400orange-500orange-600orange-700orange-800orange-900text-primarytext-primary-alternativetext-secondarytext-secondary-alternativetext-successtext-success-alternativetext-infotext-warningtext-warning-alternativetext-dangertext-danger-alternativetext-linktext-link-alternativetext-darktext-dark-alternativetext-normaltext-alternativetext-hinttext-lighttext-light-alternativetext-exception | gray-900 |
| isInheritColor | 부모 요소의 색상을 상속받을지 여부 boolean | false |
| isResetMargin | margin을 초기화할지 여부 boolean | false |
| className | jsx className | |
| fontWeight | typography에 기본적으로 font-weight가 설정되어있습니다. 커스텀 font-weight를 쓰고 싶은 경우에 사용합니다. regularmediumboldextraBold | |
| typography | Text style display1display2display3display4heading1heading2heading3heading4heading5heading6subtitle1subtitle2body1body2body3body4 | body1 |