Text

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

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

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

export default function TextTypography() {
    return (
        <VStack gap="$075" justifyContent="start" width="100%">
            <Text typography="display1">Display1</Text>
            <Text typography="heading1">Heading1</Text>
            <Text typography="subtitle1">Subtitle1</Text>
            <Text typography="body1">Body1</Text>
        </VStack>
    );
}

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>
    );
}