# Rich Text

The **Rich Text** widget allows you to display text with multiple styles within a single block. Unlike the basic [Text widget](broken://pages/C9nNxThiJc2b87pM8M0Z), Rich Text is perfect for scenarios where you need to mix formatting, such as bolding a keyword, coloring a specific phrase, or making a portion of the text clickable.

{% embed url="<https://www.youtube.com/watch?v=VeQXbORTYjc>" %}

Watch this on Youtube: <https://www.youtube.com/watch?v=VeQXbORTYjc>

<figure><img src="/files/jxcjEAEJfvDOTpVOCcFT" alt="An example of a Rich Text widget with multiple styles."><figcaption><p>An example of a Rich Text widget with multiple styles in a single block.</p></figcaption></figure>

#### Adding a Rich Text Widget

The Rich Text widget is located in the **Base Elements** section of the Widget Palette. Once added, you can configure its properties from the **Widget Properties Panel**.

### Core Concept: Text Spans

The Rich Text widget is composed of a list of **Text Spans**. Think of each span as an individual, mini-`Text` widget that has its own content, styling, and optional `onClick` action. By combining these spans, you can create a single, seamless block of text with varied formatting.

### Properties

The properties are divided into two main groups: properties for the entire widget and properties for each individual text span.

#### Global Properties

These properties control the layout and behavior of the entire Rich Text block.

<table><thead><tr><th width="176.25390625">Property</th><th>Description</th></tr></thead><tbody><tr><td><code>Alignment</code></td><td>Aligns the entire text block horizontally (<code>left</code>, <code>center</code>, <code>right</code>, <code>justify</code>).</td></tr><tr><td><code>Max Lines</code></td><td>Limits the number of lines for the entire Rich Text widget. If empty, the text will expand as needed.</td></tr><tr><td><code>Overflow</code></td><td>Controls how text overflows when it exceeds the available space. Options include <code>clip</code>, <code>fade</code>, <code>ellipsis</code>, <code>visible</code>, <code>marquee</code>.</td></tr><tr><td><code>Text Style</code></td><td>A <strong>base</strong> text style applied to all spans. This can be overridden by the styling of an individual span.</td></tr></tbody></table>

#### Text Spans

This section in the properties panel is where you manage the list of individual text segments. Each span in the list has its own set of controls:

<figure><img src="/files/GqCFsLevgQuJWbv1liQc" alt="Managing Text Spans"><figcaption><p>Each span has an input for its value and an icon to edit its style.</p></figcaption></figure>

* **Value Input**: Directly edit the text content for each span in its input field. This can be static text or a dynamic expression (e.g., `Hello, ${appState.user.name}`).
* **Styling (Pencil Icon)**: Click the pencil icon to open a modal where you can customize the `Text Style` for that specific span. You can link it to a theme style or create a custom one.
* **Reordering & Deleting**: Hover over a span to reveal controls for dragging to reorder or deleting it.
* **Add New Span**: Click the "Add New" button at the bottom to add another segment to your Rich Text.
* **Interaction (On Click)**: Inside the styling modal (opened via the pencil icon), you can also add an `On Click` action. This makes a specific span interactive, which is perfect for creating inline links like "Terms of Service" or "Privacy Policy" within a sentence.

***

### Text vs. Rich Text

Choose the right widget for the job to keep your app efficient and easy to maintain.

| Feature           | Text Widget                    | Rich Text Widget                            |
| ----------------- | ------------------------------ | ------------------------------------------- |
| **Styling**       | One style for the entire block | Multiple styles in one block                |
| **Interactivity** | The entire widget is clickable | Each text span can be clickable             |
| **Use Case**      | Headings, paragraphs, labels   | "By signing up, you agree to our **Terms**" |
| **Complexity**    | Simple                         | More complex, composed of spans             |

### Default Properties

The Rich Text widget supports all [Default Properties](/ui-building-blocks/widgets/default-properties.md).

### Use Cases

You’d typically use **Rich Text** when:

* **Mixed-style sentences**
  * “By continuing, you agree to the **Terms & Conditions** and **Privacy Policy**.”
  * “Your balance is **₹1,250.00** and next payment is **due tomorrow**.”
* **Inline emphasis**
  * Highlight a **keyword**, amount, or username inside a longer line.
  * Show parts of a sentence in bold, italic, or different color for emphasis.
* **Link-like behavior**
  * Make part of the text **clickable** (e.g., “Forgot password?”, “Learn more”).
  * Create inline CTAs inside a paragraph instead of separate buttons.
* **Formatted messages**
  * Show **system messages**, chat messages with mentions, hashtags, or tags.
  * Display **legal or policy copy** with some parts highlighted or styled differently.
* **Multi-style labels & helpers**
  * Example: “Plan: **Pro** (billed **monthly**)”
  * Example: “**50% OFF** for the first **3 months**”

In short: whenever you need **different styles or behaviors inside one text block**, Rich Text is the right choice.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digia.tech/ui-building-blocks/widgets/content-display-widgets/rich-text.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.