Photonix

Text

Typography component for displaying text.

Preview

Display Large

Headline Medium

Title Medium

Body Large - The quick brown fox jumps over the lazy dog.

Label Medium

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

<Text variant="display-lg">Display Large</Text>
<Text variant="headline-md">Headline Medium</Text>
<Text variant="title-md">Title Medium</Text>
<Text variant="body-lg">Body Large - The quick brown fox jumps over the lazy dog.</Text>
<Text variant="label-md">Label Medium</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
<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>

Colors

Text can have different colors using system tokens.

Primary Text

Secondary Text

Danger Text (using box context or explicit color if supported)

Colors
<Text color="primary">Primary</Text>
<Text color="secondary">Secondary</Text>
<Text color="error">Error</Text>

On this page

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