전체 카탈로그
콘텐츠Text17 props

Text

Text는 본문, 보조 설명, 코드 텍스트의 위계를 일관되게 표현합니다.

공식 문서 열기
실시간 미리보기콘텐츠

미리보기

Text hierarchy

Large text for emphasis.Body text for ordinary content.Supporting metadata and descriptions.var(--color-text-primary)

Import

import {Text} from '@astryxdesign/core/Text';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

사용 시점

Text는 본문, 보조 설명, 코드 텍스트의 위계를 일관되게 표현합니다.

texttypographylabelparagraphheadingcaptionfontbody

중요 props

typebody | large | label | supporting | code | display-1 | display-2 | display-3optional
size4xs | 3xs | 2xs | xsm | sm | base | lg | xl | 2xl | 3xl | 4xloptional
colorprimary | secondary | disabled | placeholder | accent | inheritoptional
weightnormal | medium | semibold | boldoptional

테마 대상

astryx-headingastryx-text

사용 지침

  • 권장Text의 목적이 드러나도록 레이블과 보조 설명을 함께 제공하세요.
  • 권장상태 변화가 필요한 경우 사용자가 바로 이해할 수 있는 피드백을 연결하세요.
  • 권장키보드와 보조 기술 사용자가 같은 흐름을 따라갈 수 있게 접근성 속성을 확인하세요.
  • 권장화면 밀도와 주변 컴포넌트의 위계가 유지되도록 간격과 크기를 맞추세요.