Text

Text component is a versatile primitive for rendering text, offering responsive sizing, semantic colors, adjustable font weights, alignment options, and text decoration features to enhance readability and visual hierarchy.

Import

import { Text } from '@vortex-kit/vortex';
import type { TextProps } from '@vortex-kit/vortex';

Display

<Text size='body-md-desktop'>Design Engineer</Text>

Design Engineer

Features
Supports responsive text sizes for mobile and desktop
Provides comprehensive color options including semantic colors
Offers multiple font weights from light to black
Supports text alignment and decoration
Enables text truncation with maxLines
Supports text wrapping with balance
Accepts custom attributes and className
Assigns the correct HTML tag

Title Text Sizes

Text supports responsive sizing with different variants for mobile and desktop. The size prop accepts responsive objects to provide different sizes at different breakpoints.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Show Code

Body Text Sizes

Body text sizes are optimized for readability across different contexts.

Body XL Regular
Body XL Medium
Body LG Regular
Body LG Medium
Body MD Regular
Body MD Medium
Body SM Regular
Body SM Medium
Body XS Regular
Body XS Medium

Show Code

Link Text Sizes

Link text sizes are specifically designed for interactive elements.

Link LG
Link MD
Link SM

Show Code

Color

Text supports a comprehensive range of colors including semantic colors for different contexts and states.

Default
Subtle
Subtlest
Primary
Primary Bold
Success
Success Bold
Warning
Warning Bold
Critical
Critical Bold
Info
Info Bold

Show Code

Inverse Color

Inverse color is designed for use on dark backgrounds.

Inverse

Show Code

Inherit Color

The inherit color allows text to inherit the color from its parent element.

Inherit

Show Code

Weight

Text supports multiple font weights to create visual hierarchy and emphasis.

Light
Regular
Medium
Semibold
Bold
Heavy
Black

Show Code

Decoration

Text supports text decoration for special formatting needs.

Line through

Show Code

Wrap

Text supports text wrapping with balance for better typography.

Vortex Design System is a collection of reusable components and primitives that help developers build

Show Code

Max Lines

Text can be truncated to a specific number of lines using the maxLines prop.

I'm a very long text that should be truncated after 2 lines. I'm a very long text that should be truncated after 2 lines. I'm a very long text that should be truncated after 2 lines. Once I'm a very long text that should be truncated after 2 lines. I'm a very long text that should be truncated after 2 lines. I'm a very long text that should be truncated after 2 lines.
The quick brown fox jumps over the lazy dog. On the other side of the world, the quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. On the other side of the world, the quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. On the other side of the world, the quick brown fox jumps over the lazy dog. Also I'm a very long text that should be truncated after 3 lines. I'm a very long text that should be truncated after 3 lines. I'm a very long text that should be truncated after 3 lines. Once I'm a very long text that should be truncated after 3 lines. I'm a very long text that should be truncated after 3 lines. I'm a very long text that should be truncated after 3 lines.

Show Code

Align

Text supports text alignment with responsive options.

Text Align Start
Text Align End
Text Align Center
Text Align: Responsive

Show Code

Accessibility

Text component provides semantic HTML structure and supports accessibility attributes.

Key
Description
⬢
If as prop is omitted, it defaults to span.
⬢
Use semantic HTML elements with the as prop for better accessibility (e.g., as="p", as="h1").
⬢
Text supports custom attributes for additional accessibility features.
⬢
Use appropriate color contrast ratios for text readability.