Photonix

Text

Typography component for displaying text.

Preview

Build consistent interfaces with type tokens.

Usage
"use client";

import { Text } from '@photonix/ultimate';

export default function TextPreviewExample() {
    return <Text variant="body-md">Build consistent interfaces with type tokens.</Text>;
}

Component API

Text

Prop
Type
Default
Description
variant
ResponsiveValue<TextVariant>
'body-md'
Typography variant from typescale tokens
color
TextColor
-
Text color from text-* tokens
weight
TextWeight
-
Font weight override
align
ResponsiveValue<TextAlign>
-
Text alignment
truncate
number | boolean
-
Truncate text with ellipsis (true = single line, number = line clamp)
as
"small" | "p" | "a" | "code" | "div" | "em" | "label" | "pre" | "span" | "strong"
'p'
Render as different HTML element
decoration
"none" | "underline"
-
Text decoration
children
React.ReactNode
-
Children

Variants

Variants

Different scale of typography for various contexts.

Display Small

Headline Small

Title Medium

Body Medium

Label Medium

Variants
"use client";

import { Flex, Text } from '@photonix/ultimate';

export default function TextVariantsExample() {
    return (
        <Flex direction="column" gap="sm">
            <Text variant="display-sm">Display Small</Text>
            <Text variant="headline-sm">Headline Small</Text>
            <Text variant="title-md">Title Medium</Text>
            <Text variant="body-md">Body Medium</Text>
            <Text variant="label-md">Label Medium</Text>
        </Flex>
    );
}

Colors

Text can have different colors using system tokens.

Primary Text

Secondary Text

Danger Text

Colors
"use client";

import { Box, Flex, Text } from '@photonix/ultimate';

export default function TextColorsExample() {
    return (
        <Flex direction="column" gap="sm">
            <Text color="primary">Primary Text</Text>
            <Text color="secondary">Secondary Text</Text>
            <Box style={{ color: 'var(--color-danger-fg)' }}>
                <Text>Danger Text</Text>
            </Box>
        </Flex>
    );
}

On this page

Preview
Component API
Variants
Variants
Colors
Photonix UI - React Components, Templates & Figma Design System