Text components handle all readable content in your widget — from body copy and headings to form labels and Markdown-formatted blocks. Five components cover the full range of text needs: Text, Title, Caption, Label, and Markdown.
Common Props
The Text, Title, and Caption components share a set of common props for controlling content and appearance.
| Prop | Type | Default | Description |
|---|
value | string | — | The text content to display. |
color | color | — | Text color. |
textAlign | start | center | end | — | Horizontal text alignment. |
truncate | boolean | false | Truncate overflowing text with an ellipsis. |
maxLines | number | — | Maximum number of visible lines. Content beyond this limit is hidden. |
Text
The most common component for displaying body text. Use it for dynamic content such as descriptions, paragraphs, and inline values.
<Text value={description} size="sm" color="secondary" maxLines={3} />
Props
In addition to the common props, Text supports:
| Prop | Type | Default | Description |
|---|
size | xs | sm | md | lg | xl | md | Font size. |
weight | normal | medium | semibold | bold | normal | Font weight. |
width | number | — | Fixed width for the text element. |
italic | boolean | — | Render text in italic. |
lineThrough | boolean | — | Apply a strikethrough style. |
tabularNums | boolean | — | Use tabular (monospaced) number figures for aligned columns. |
minLines | number | — | Minimum number of lines the element occupies. |
Use tabularNums when displaying numbers in tables or lists — it ensures digits are evenly spaced so columns stay aligned.
Title
Heading text with larger, bolder sizing. Use it for section headers, card titles, and any prominent label.
<Title value="Order Summary" size="lg" />
Props
In addition to the common props, Title supports:
| Prop | Type | Default | Description |
|---|
size | xs | sm | md | base | lg | xl | 2xl | 3xl | 4xl | 5xl | 6xl | md | Font size. |
weight | normal | medium | semibold | bold | bold | Font weight. |
width | number | — | Fixed width for the title element. |
tabularNums | boolean | — | Use tabular (monospaced) number figures. |
Caption
Smaller secondary text for annotations, timestamps, and supplementary details. Caption preserves line breaks in the provided value.
<Caption value="Last updated 2 minutes ago" size="sm" color="secondary" />
Props
In addition to the common props, Caption supports:
| Prop | Type | Default | Description |
|---|
size | sm | md | lg | md | Font size. |
weight | normal | medium | semibold | bold | normal | Font weight. |
Caption automatically preserves line breaks (\n) in the value string, so you can pass multi-line content without additional formatting.
Label
A text label designed for form fields. Place it directly above an Input, Select, or other form control to provide a visible, accessible label.
<Label value="Email address" fieldName="email" />
<Input name="email" placeholder="you@example.com" />
Props
| Prop | Type | Default | Description |
|---|
value | string | — | The label text. |
fieldName | string | — | The name of the input this label is associated with. |
size | xs | sm | md | lg | xl | md | Font size. |
weight | normal | medium | semibold | bold | — | Font weight. |
Always set fieldName to match the name prop of the corresponding input. This links the label to the field for accessibility and click-to-focus behavior.
Markdown
Renders Markdown-formatted text, including headings, lists, links, code blocks, and inline formatting.
<Markdown value={instructions} />
Props
| Prop | Type | Default | Description |
|---|
value | string | — | The Markdown content to render. |
