Text
textApplies semantic size, tone, weight, truncation, and polymorphic element choices to text.
Usage
Semantic Hue
tone adopts semantic token, and automatically adapts the light and dark themes.
Default text
Auxiliary instructions
Emphasis text
Successful result
Heed the warning
Danger warning
<Text>Default text</Text>
<Text tone="muted">Auxiliary instructions</Text>
<Text tone="primary">Emphasis text</Text>
<Text tone="success">Successful result</Text>
<Text tone="warning">Pay attention to the warning</Text>
<Text tone="danger">Danger Tip</Text>Font size ladder
size Offers xs/sm/base/lg/xl five speeds.
xs Minimal Assist
sm Minor
base Text benchmark
lg Large text
xl Introduction
<Text size="xs">xs Minimal Assist</Text>
<Text size="sm">sm Minor</Text>
<Text size="base">base text benchmark</Text>
<Text size="lg">lg Large text</Text>
<Text size="xl">xl Instructions</Text>Font weight
weight Offers normal/medium/semibold/bold.
General
Medium
Half thick
bold
<Text weight="normal">General</Text>
<Text weight="medium">Medium</Text>
<Text weight="semibold">Semi-coarse</Text>
<Text weight="bold">Bold</Text>Single line ellipsis
truncate Single lines are truncated and ellipses are displayed when the container is narrowed.
The Text component of Hulian Design System supports single-line ellipsis and multi-line truncation. This text is long enough to trigger the truncation effect and observe the ellipsis position.
<div className="max-w-xs">
<Text truncate>{longLine}</Text>
</div>Multi-line truncation
lineClamp is restricted to n and is omitted after the line, taking precedence over truncate.
<div className="max-w-xs">
<Text tone="muted" lineClamp={2}>{longText}</Text>
</div>When to use
Use Text for body copy, supporting guidance, or inline content that needs consistent size, semantic tone, weight, and truncation. Use Heading for h1–h6 semantics and heading scales, or Prose for a complete rich-text passage.
Import
import { Text } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| as | ElementType | "p" | Rendered element tag |
| size | "xs" | "sm" | "base" | "lg" | "xl" | "base" | Font size |
| tone | "default" | "muted" | "primary" | "success" | "warning" | "danger" | "default" | Semantic hue (self-adaptation of light and dark) |
| weight | "normal" | "medium" | "semibold" | "bold" | "normal" | Font weight |
| truncate | boolean | false | Single line ellipsis truncation |
| lineClamp | number | — | Multi-line truncation (up to n lines following ellipses); takes precedence over truncate when set |
Inherited HTMLAttributes<HTMLElement> (Omit color, the tone is changed to tone).
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | text content |
Example
// Semantic tones
<Text tone="muted">Auxiliary instructions</Text>
<Text tone="success">3/3 points · Correct</Text>
<Text tone="warning">Low mastery rate</Text>
<Text tone="danger">Danger warning</Text>
// Multi-line truncation
<div className="max-w-xs">
<Text lineClamp={2}>{longText}</Text>
</div>Usage guidelines
truncate works only when the container has a constrained width. If both lineClamp and truncate are set, lineClamp takes precedence.
Related
Heading · Prose · Markdown · AuroraText · AnimatedShinyText · AnimatedGradientText
Playground
Hulian Text Polymorphic text primitive
<Text>Hulian Text Polymorphic text primitive</Text>