ContentText17 props
Text
Text renders styled body text and headings from the theme. Use Text with a semantic type for body copy, labels, and captions, and Heading for section titles that output the corr...
공식 문서 열기Preview
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에서 가져옵니다.
When to use
Text renders styled body text and headings from the theme. Use Text with a semantic type for body copy, labels, and captions, and Heading for section titles that output the corr...
texttypographylabelparagraphheadingcaptionfontbody
Important 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
Theming targets
astryx-headingastryx-text
Best practices
- DoPick a semantic type (body, label, supporting, large, code) instead of manually setting size and weight; the theme handles the details.
- DoSet accessibilityLevel on Heading when the visual level differs from the document outline so screen readers announce the correct hierarchy.
- DoUse maxLines with a number to truncate long content; a tooltip appears automatically on hover so no text is lost.
- DoEnable hasTabularNumbers for columns of numeric data so digits align vertically across rows.