Text

Hello World

import { Text } from '@vapor-ui/core';

export default function DefaultText() {
    return <Text>Hello World</Text>;
}

Property

Typography

Typography prop을 사용하여 텍스트의 시각적 스타일을 지정할 수 있습니다. Display, Heading, Subtitle, Body, Code 등 다양한 텍스트 스타일이 제공됩니다.

Display1Heading1Subtitle1Body1

import { Text } from '@vapor-ui/core';

export default function TextTypography() {
    return (
        <div className="flex flex-wrap gap-2">
            <Text typography="display1">Display1</Text>
            <Text typography="heading1">Heading1</Text>
            <Text typography="subtitle1">Subtitle1</Text>
            <Text typography="body1">Body1</Text>
        </div>
    );
}

Foreground

Foreground prop을 사용하여 텍스트의 색상을 지정할 수 있습니다. 브랜드 색상, 상태 색상, 중성 색상 등 다양한 색상 토큰이 제공됩니다.

PrimarySecondarySuccessWarningDangerHint

import { Text } from '@vapor-ui/core';

export default function TextForeground() {
    return (
        <div className="flex flex-wrap gap-2">
            <Text foreground="primary-100">Primary</Text>
            <Text foreground="secondary-100">Secondary</Text>
            <Text foreground="success-100">Success</Text>
            <Text foreground="warning-100">Warning</Text>
            <Text foreground="danger-100">Danger</Text>
            <Text foreground="hint-100">Hint</Text>
        </div>
    );
}

Props Table

이 컴포넌트는 span 요소를 기반으로, 표준 HTML 속성(className, style 등)을 지원합니다.

Prop	Default	Type
typography?	body1	display1display2display3display4heading1heading2heading3heading4heading5heading6subtitle1subtitle2body1body2body3body4code1code2undefined
foreground?	normal	primaryprimary-200secondarysecondary-200successsuccess-200warningwarning-200dangerdanger-200hinthint-200contrastcontrast-200normalnormal-100accentaccent-200undefined
render?	span	ReactElement
children?	null	React.ReactNode

Property

Typography

Foreground

Props Table

On this page