Text

Versatile typography component for consistent text rendering in editor interfaces. Provides semantic variants, flexible sizing, truncation, and comprehensive styling options using theme typography tokens.

Live Preview

Import

import { Text } from 'entangle-ui';

Usage

<Text variant="body">Regular paragraph text</Text>

Variants

The variant prop provides semantic presets with predefined size, weight, and styling.

<Text variant="display">Display — Large titles</Text>
<Text variant="heading">Heading — Section headings</Text>
<Text variant="subheading">Subheading — Subsection headings</Text>
<Text variant="body">Body — Standard body text</Text>
<Text variant="caption">Caption — Small descriptive text</Text>
<Text variant="code">Code — Monospace inline code</Text>
<Text variant="inherit">Inherit — Inherits from parent</Text>

Variant	Size	Weight	Use case
display	xl	semibold	Main page titles
heading	lg	medium	Section headings
subheading	md	medium	Subsection headings
body	sm	normal	Standard body text
caption	xs	normal	Small helper text, labels
code	sm	normal (mono)	Inline code snippets
inherit	—	—	Inherits parent typography

Sizes

Override the variant’s default size with the size prop.

<Text size="xs">Extra Small</Text>
<Text size="sm">Small</Text>
<Text size="md">Medium</Text>
<Text size="lg">Large</Text>
<Text size="xl">Extra Large</Text>

Colors

The color prop maps to theme color tokens.

<Text color="primary">Primary text</Text>
<Text color="secondary">Secondary text</Text>
<Text color="muted">Muted text</Text>
<Text color="disabled">Disabled text</Text>
<Text color="accent">Accent text</Text>
<Text color="success">Success text</Text>
<Text color="warning">Warning text</Text>
<Text color="error">Error text</Text>

Weight

Override the variant’s default weight with the weight prop.

<Text weight="normal">Normal weight</Text>
<Text weight="medium">Medium weight</Text>
<Text weight="semibold">Semibold weight</Text>

Polymorphic Rendering

Use the as prop to render as any semantic HTML element.

<Text as="h1" variant="display">Page Title</Text>
<Text as="h2" variant="heading">Section</Text>
<Text as="p" variant="body">Paragraph content</Text>
<Text as="label" variant="caption">Form label</Text>
<Text as="span" variant="code">inline code</Text>
<Text as="strong" weight="semibold">Important</Text>
<Text as="small" variant="caption">Fine print</Text>

Truncation

Use truncate to clip overflowing text with an ellipsis. Combine with maxLines for multi-line truncation.

{
  /* Single line truncation */
}
<Text truncate>
  This very long text will be truncated with an ellipsis when it overflows...
</Text>;

{
  /* Multi-line truncation */
}
<Text truncate maxLines={2}>
  This text will be truncated after two lines. Any content beyond the second
  line will be clipped with an ellipsis at the end.
</Text>;

No Wrap

Prevent text from wrapping to the next line.

<Text nowrap>This text will stay on a single line no matter what.</Text>

Monospace

Force monospace font rendering. Automatically enabled for the code variant.

<Text mono>Monospace text</Text>
<Text variant="code">Also monospace</Text>

Line Height

Override line height with the lineHeight prop.

<Text lineHeight="tight">Tight line height</Text>
<Text lineHeight="normal">Normal line height</Text>
<Text lineHeight="relaxed">Relaxed line height</Text>

Alignment

<Text align="left">Left aligned</Text>
<Text align="center">Center aligned</Text>
<Text align="right">Right aligned</Text>
<Text align="justify">Justified text alignment</Text>

Combining Props

<Text
  as="h1"
  variant="display"
  color="accent"
  weight="semibold"
  align="center"
>
  Project Dashboard
</Text>

<Text
  as="p"
  variant="body"
  color="secondary"
  truncate
  maxLines={3}
>
  A long description that will be truncated after three lines...
</Text>

Props

Prop	Type	Default	Description
children	ReactNode	—	Text content.
as	'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'label' | 'strong' | 'em' | 'small'	'span'	HTML element to render as.
variant	'display' | 'heading' | 'subheading' | 'body' | 'caption' | 'code' | 'inherit'	'body'	Semantic variant with predefined styling.
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	—	Text size using theme typography tokens. Overrides variant size.
weight	'normal' | 'medium' | 'semibold'	—	Text weight using theme typography tokens. Overrides variant weight.
color	'primary' | 'secondary' | 'muted' | 'disabled' | 'accent' | 'success' | 'warning' | 'error'	'primary'	Text color using theme color tokens.
lineHeight	'tight' | 'normal' | 'relaxed'	—	Line height. Overrides variant line height.
align	'left' | 'center' | 'right' | 'justify'	—	Text alignment.
truncate	boolean	false	Whether to truncate text with ellipsis on overflow.
maxLines	number	—	Maximum lines before truncating. Requires truncate=true.
nowrap	boolean	false	Whether text should not wrap to the next line.
mono	boolean	false	Whether to use monospace font family. Automatically true for code variant.
className	string	—	Additional CSS class name.
style	CSSProperties	—	Inline styles.
testId	string	—	Test identifier for automated testing.
ref	Ref<HTMLElement>	—	Ref to the underlying HTML element.

The component also accepts all standard HTML attributes for the rendered element.

Accessibility

• Use the as prop to render semantically correct HTML elements (e.g., h1 for page titles, p for paragraphs)
• Color contrast follows the theme token system for WCAG compliance
• Truncated text retains its full content in the DOM for screen readers
• The color prop maps to semantic theme tokens, not raw CSS values