Text

The Text component is a versatile typographic component that supports various styling options through variants, colors, and text alignment. It automatically maps semantic HTML elements based on the selected variant.

Usage

import { Text } from '@harnessio/ui/components'

// ...

return (
  <>
    {/* Basic usage */}
    <Text>Default text with body-normal variant</Text>

    {/* With variants */}
    <Text variant="heading-section">Section Heading</Text> // Maps to <h2>
    <Text variant="body-strong">Important text with stronger emphasis</Text>

    {/* With colors */}
    <Text color="foreground-1">High-contrast text</Text>
    <Text color="success">Success message</Text>

    {/* With custom element */}
    <Text variant="heading-hero" as="h2">Hero heading as H2</Text> //  <h1> => <h2>
    <Text<'time'> as="time" dateTime="2025-07-07">July 7</Text>

    {/* With truncation */}
    <Text truncate>This text will be truncated with an ellipsis if it overflows</Text>

    {/* With text wrapping options */}
    <Text wrap="balance">This text will be balanced for better readability</Text>
  </>
)

Variant

The Text component supports various typographic variants that map to semantic HTML elements. The default variant is body-normal, which renders as a <p> element. Other variants include:

Color

The Text component supports various color options to enhance visibility and convey meaning. The default color is foreground-2. Other available colors include:

Align

Wrap

API Reference

Prop	Required	Default	Type
variant	false	body-normal	'heading-hero' | 'heading-section' | 'heading-subsection' | 'heading-base' | 'heading-small' | 'body-normal' | 'body-single-line-normal' | 'body-strong' | 'body-single-line-strong' | 'body-code' | 'caption-normal' | 'caption-soft' | 'caption-single-line-normal' | 'caption-single-line-soft'
color	false	foreground-2	'inherit' | 'foreground-1' | 'foreground-2' | 'foreground-3' | 'state-disabled' | 'success' | 'warning' | 'danger'
align	false	left	'left' | 'center' | 'right'
as	false	'span'	'div' | 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'legend' | 'caption' | 'figcaption' | 'blockquote' | 'pre' | 'kbd' | 'var' | 'code' | 'samp' | 'cite' | 'time' | 'address' | 'strong' | 'abbr' | 'em' | 'li' | 'dt'| 'dd'
asChild	false	false	boolean
truncate	false	false	boolean
wrap	false	wrap	'wrap' | 'nowrap' | 'pretty' | 'balance'
className	false		string
children	true		ReactNode