Text

The Text component is a versatile typographic component that supports various styling options through variants, colors, and text alignment. It picks a sensible default HTML element based on the selected variant, which you can override with as.

Variations

Variant

The Text component supports various typographic variants. The default variant is body-normal. Other variants include:

Color

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

Align

Wrap

Truncate

The truncate prop truncates text with an ellipsis if it overflows its container. This is particularly useful for single-line text that should not wrap.

Line clamp

The lineClamp prop controls how many lines of text are shown before truncating. It can be set to a specific number or to 'default' for the component’s default behavior.

Note: The lineClamp prop takes precedence over the truncate prop when both are used, as it provides more specific control over text clamping.

Installation

import { Text } from "@harnessio/ui/components";

// Basic
<Text>Default text with the body-normal variant</Text>

// Variant + color
<Text variant="heading-section" color="foreground-1">Section heading</Text>

// Override the element for correct semantics
<Text variant="heading-hero" as="h1">Hero heading as a real h1</Text>

// Truncation
<Text truncate>Truncated with an ellipsis if it overflows</Text>

Anatomy

Text renders a single typographic element chosen from the variant, with the color, alignment, wrapping, and truncation applied as classes.

Each variant maps to a default HTML element: heading-* and body-* variants render as <p>, body-code as <pre>, and caption-* as <span>.
Heading variants render as <p role="heading"> rather than a real <h1>–<h6>. Use as (e.g. as="h2") when you need a true heading level in the document outline.
as overrides the element; asChild merges Text’s props onto the single child you provide instead of rendering its own element.
truncate and lineClamp both add a native title tooltip carrying the full text; lineClamp wins when both are set.

Best practices

Choose the variant that matches the content’s role so hierarchy stays consistent — don’t recreate sizes with className.
Use as to give headings the correct semantic level (h1–h6); the visual variant and the element are independent.
Prefer lineClamp for multi-line clamping and truncate for single-line ellipsis.
Let color convey state (success, warning, danger) rather than hard-coded color classes.

Don’t

Don’t rely on heading-* variants alone for document structure — on their own they’re <p role="heading"> with no level.
Don’t set both truncate and lineClamp expecting them to combine; lineClamp takes precedence.

Accessibility

Labeling & semantics

Heading variants expose role="heading" but no heading level. For a meaningful outline, pass the matching as element (as="h2", etc.).
When truncated (via truncate or lineClamp), the full text is preserved in the element’s title attribute so it remains discoverable on hover.

Focus & states

Text is non-interactive and adds no focus behavior of its own. Any interactive element you render through as/asChild keeps its native behavior.

Properties

Prop	Required	Default	Type
variant	false	'body-normal'	'heading-hero' \| 'heading-section' \| 'heading-default' \| 'heading-subsection' \| 'heading-base' \| 'heading-small' \| 'body-normal' \| 'body-single-line-normal' \| 'body-strong' \| 'body-single-line-strong' \| 'body-code' \| 'caption-normal' \| 'caption-light' \| 'caption-strong' \| 'caption-code' \| 'caption-single-line-normal'
color	false	'foreground-2'	'inherit' \| 'foreground-1' \| 'foreground-2' \| 'foreground-3' \| 'foreground-4' \| 'disabled' \| 'success' \| 'warning' \| 'danger' \| 'merged' \| 'brand'
align	false		'left' \| 'center' \| 'right'
as	false	(derived from variant)	'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' \| 'del' \| 'ins'
asChild	false	false	boolean
truncate	false	false	boolean
lineClamp	false		'1' \| '2' \| '3' \| '4' \| '5' \| '6' \| 'default'
wrap	false		'wrap' \| 'nowrap' \| 'pretty' \| 'balance'
className	false		string
children	true		ReactNode