Text

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.

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.

Getting Started

JavaScript Embed Features

API v1 Reference

Advanced Integration

Widgets

Text

Common Props

Text

Props

Title

Props

Caption

Props

Label

Props

Markdown

Props

​Common Props

​Text

​Props

​Title

​Props

​Caption

​Props

​Label

​Props

​Markdown

​Props

Common Props

Text

Props

Title

Props

Caption

Props

Label

Props

Markdown

Props