Text

Text is a foundational element for communication, conveying information to users. It serves various purposes, including displaying content, headings, links, and other text-based elements.

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 utilities 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.