Text Component

A flexible typography component for consistent text rendering throughout your application.

Basic Usage

html
<uText variant="heading">Page Heading</uText>
<uText variant="body" tag="p">This is a paragraph.</uText>
<uText variant="caption" color="text-secondary">Helper text</uText>

Variants

The component supports a wide range of typography variants.

html
<uText variant="display">Display</uText>
<uText variant="title">Title</uText>
<uText variant="heading">Heading</uText>
<uText variant="subheading">Subheading</uText>
<uText variant="body-lg">Body Large</uText>
<uText variant="body">Body Default</uText>
<uText variant="body-sm">Body Small</uText>
<uText variant="label">Label</uText>
<uText variant="helper">Helper</uText>
<uText variant="caption">Caption</uText>
<uText variant="overline">Overline</uText>

API Reference

Inputs

PropertyTypeDefaultDescription
variantTextVariant'body'The typography style variant
tagTextTag'span'The HTML tag to render
colorTextColorundefinedOptional color override
align'left' | 'center' | 'right'undefinedText alignment
truncatebooleanfalseEnable text truncation with ellipsis
widthstringundefinedOptional width constraint