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.

Code Editor

Features

Provides different variants

Allows color customization

Enables text styling

Accepts custom attributes and className

Assigns the correct HTML tag

Allows text truncation

Ensures responsive design

Reference Links

Success Criterion Contrast

Anatomy

Import all parts and combine them together.

import { Text } from '@umrel/umrel';
import type { TextProps } from '@umrel/umrel';

<Text variant={{ xs: 'heading-md-mobile', sm: 'heading-md-desktop' }}>
    Hey there!
</Text>

Variant

The text variants include

heading

for titles,

body

text for paragraphs, and

link

for links, each available in sizes

2xl

xl

lg

md

sm

xs

for both mobile and desktop.

Code Editor

Color

The text color can be customized using the

color

property. The

color

property accepts the following values: props table.

Code Editor

Style

Text can be styled using the

decoration

wrap

align

, and

weight

properties.

Code Editor

Truncate

Text can be truncated using the

maxLines

property.

Code Editor

Accessibility

Ensure that text meets the Success Criterion Contrast for readability and accessibility.

Key	Description
!	Text color must meet the contrast ratio of 4.5:1 for normal text and 3:1 for large text.
!!	Change HTML tag using the `as` prop to preserve semantics and improve accessibility.