# Rich Text

The **Rich Text** widget allows you to display text with multiple styles within a single block. Unlike the basic [Text widget](https://docs.digia.tech/ui-building-blocks/widgets/content-display-widgets/broken-reference), 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="https://3626461507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhApDTL7kHrXte2TTtjs%2Fuploads%2Fgit-blob-97199b7a9d9c935321c573701759cd8fa48cc371%2Frich_text_intro.jpg?alt=media" 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="https://3626461507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhApDTL7kHrXte2TTtjs%2Fuploads%2Fgit-blob-bc354dd382db779e9fdf5befba66eb4e066e2f12%2FScreenshot%202025-07-17%20at%209.35.03%E2%80%AFPM.png?alt=media" 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](https://docs.digia.tech/ui-building-blocks/widgets/default-properties "mention").

### 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.