Skip to main content

Text

The Text component is a semantic text component built on top of Box, designed for body copy, labels, captions, and other inline text content.

Open in Storybook

Import​

import { Text } from "@tosui/react";

Basic usage​

Key features​

  • Default element: <span> (inline)
  • Polymorphic: Can render as any element via as prop
  • Shorthand props: Convenient aliases for common text styling
  • Utility props: Built-in support for truncation and italics
  • Built on Box: Accepts Box props except the typography and color props that Text replaces

Size​

Text uses Tosui's font size scale:

5XL (48px)4XL (36px)3XL (30px)2XL (24px)Extra large (20px)Large text (18px)Default text (16px)Small text (14px)Extra small text (12px)

Default: md

Weight​

Font weight options:

Normal weight (400)
Medium weight (500)
Semibold weight (600)
Bold weight (700)

Default: normal

Alignment​

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

Color​

Text supports Tosui's semantic color tokens:

Primary text color
Secondary/muted text
Tertiary/subtle text
Primary brand color
Primary emphasis
Accent color
Accent emphasis
Success color
Warning color
Error color

Truncate​

Automatically truncates text with an ellipsis:

<Text truncate>
  This is a very long piece of text that will be truncated with an ellipsis when
  it overflows its container
</Text>

This applies:

  • overflow: hidden
  • text-overflow: ellipsis
  • white-space: nowrap

Italic​

<Text italic>Italic text</Text>

Polymorphic rendering​

Render as different elements while maintaining Text styling:

<Text as="p">Paragraph element</Text>
<Text as="label">Label element</Text>
<Text as="span">Span element (default)</Text>
<Text as="div">Block-level div</Text>

Common patterns​

Label text​

<Text as="label" size="sm" weight="medium">
  Email Address
</Text>

Caption text​

<Text size="sm" color="foreground-muted">
  Last updated 2 hours ago
</Text>

Error message​

<Text size="sm" color="error">
  This field is required
</Text>

Muted helper Text​

<Text size="sm" color="foreground-subtle">
  We'll never share your email address
</Text>

Emphasized text​

<Text weight="semibold" color="primary">
  Important information
</Text>

Combining with Box props​

Text accepts the Box props that it does not replace:

<Text size="lg" weight="medium" p={4} bg="surface" rounded="md">
  Text with background and padding
</Text>

Layout example​

<Box display="flex" flexDirection="column" gap={2}>
  <Text size="lg" weight="semibold">
    Section Title
  </Text>
  <Text color="foreground-muted">
    Section description goes here with muted color
  </Text>
  <Text size="sm" color="foreground-subtle">
    Additional context or metadata
  </Text>
</Box>

Props reference​

Text-Specific props​

  • size: Font size (xs | sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl)
  • weight: Font weight (normal | medium | semibold | bold)
  • align: Text alignment (left | center | right | justify)
  • color: Semantic color token (see Color section above)
  • truncate: Enable text truncation with ellipsis
  • italic: Enable italic styling

Inherited from Box​

Text inherits all props from Box except fontSize, fontWeight, textAlign, and color (which are replaced by the shorthand props above). This includes:

  • Spacing (margin, padding)
  • Layout (display, position)
  • Size (width, height)
  • Flexbox and grid
  • Borders, roundness, shadows
  • Other Box style props

See the Box component documentation for the full list.

TypeScript​

TextProps infers the HTML attributes for the element selected by as.