✍️ Components: text

There are five text components: Text, Title, Caption, Label and Markdown. Their value is usually bound to data.

🔤 Shared props

• value — a string or a binding (value={order.title}).
• color — a token: default, secondary, tertiary, emphasis, success, danger …
• weight — normal | medium | semibold | bold
• textAlign — start | center | end
• truncate — cuts one line with an ellipsis.
• maxLines — clamps to that many lines.

📝 Text

Body text. Extra props: size (xs … xl), italic, lineThrough.

<Text value={order.note} size="sm" color="secondary" maxLines={2} />

🔠 Title

A heading. size: xs | sm | md | lg | xl | 2xl | 3xl.

<Title value={hotel.name} size="lg" />

🏷 Caption

Small helper text. size: sm | md | lg.

🔖 Label

The caption of a form field. Props: value, fieldName (which field it belongs to), size, weight.

<Label value="Your name" fieldName="name" />
<Input name="name" placeholder="Name" required />

📄 Markdown

Renders markdown — lists, bold text, links. Useful for a longer answer written by the agent.

<Markdown value={answer} />

💡 Tips

• The chat window is narrow — use maxLines or truncate for long strings.
• color="secondary" with size="sm" is the natural pairing for secondary information.