# Text

The **Text** widget is a fundamental building block for any application. It allows you to display static or dynamic text content on the screen. Whether it's a heading, a paragraph, a label, or inline text — it helps convey information clearly and effectively to users.

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

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

#### Adding a Text Widget

The Text widget is located in the **Base Elements** section of the Widget Palette. You can drag it to your desired screen location or insert it directly via the widget tree. Once selected, the **Widget Properties Panel** appears on the right side of the screen. Use this panel to enter your desired text and customize its appearance.

### Core Concepts

Before diving into properties, it's helpful to understand two core concepts that make the Text widget powerful in Digia Studio.

#### 1. Static vs. Dynamic Text

You can use the Text widget to display both static, unchanging text and dynamic text that is bound to a data source.

* **Static Text:** Simply type the text you want to display directly into the `Text` property.
* **Dynamic Text:** Use expressions to bind the `Text` property to a variable from your app's state, an API response, or a function. This is the key to creating data-driven applications.

#### 2. Styling Strategy: Theming vs. Customizing

Consistency is key to good design. The Text widget supports two styling modes:

* **Linked (Theme):** The text's style is "linked" to your app's global `Typography` theme. This ensures all your text looks consistent. If you update the theme, all linked text widgets will update automatically.
* **Unlinked (Custom):** Use this for specific, one-off designs where you need to override the theme. This gives you full control over every style property for that specific widget.

{% hint style="success" %}
**Note:** For design consistency and easier maintenance, it is highly recommended to use theme tokens (e.g., `Headline Medium`, `Body Text Large`) rather than custom values for text styling whenever possible. Custom styling should be reserved for unique, one-off cases.
{% endhint %}

### Properties

The properties for the Text widget are organized by function. For more detailed formatting (e.g., multiple styles in one sentence), we recommend using the [Rich Text widget](/ui-building-blocks/widgets/content-display-widgets/rich-text.md) instead.

#### Content

<table><thead><tr><th width="176.25390625">Property</th><th>Description</th></tr></thead><tbody><tr><td><code>Value</code></td><td>The actual string content to display. Can be a static value or a dynamic expression.</td></tr></tbody></table>

#### Layout & Behavior

<table><thead><tr><th width="176.25390625">Property</th><th>Description</th></tr></thead><tbody><tr><td><code>Alignment</code></td><td>Aligns text horizontally within its container (<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 shown. 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></tbody></table>

#### Styling

Styling is controlled via the `Text Style` property, which can be **Linked** to a theme or **Unlinked** for custom styling.

<figure><img src="/files/e9hCvsl9GWxjT4FYkXx8" alt="Visual explanation of different Box Fit properties like cover, contain, and fill."><figcaption><p>In 'Linked' mode, you select a predefined text style from your app's theme. In 'Unlinked' mode, you get granular control over font properties.</p></figcaption></figure>

<table><thead><tr><th width="176.25390625">Property</th><th>Description</th></tr></thead><tbody><tr><td><code>Text Style</code></td><td>The main property for styling. Choose between <strong>Linked</strong> (theme style) and <strong>Unlinked</strong> (custom).</td></tr><tr><td><code>Font Family</code></td><td>The font family used (e.g., <code>Poppins</code>, <code>Roboto</code>). Only available when <code>Text Style</code> is <strong>Unlinked</strong>.</td></tr><tr><td><code>Size</code></td><td>Font size in pixels. Only available when <code>Text Style</code> is <strong>Unlinked</strong>.</td></tr><tr><td><code>Weight</code></td><td>Font weight like <code>regular</code>, <code>bold</code>, <code>medium</code>, etc. Only available when <code>Text Style</code> is <strong>Unlinked</strong>.</td></tr><tr><td><code>Height</code></td><td>Line height multiplier (e.g., 1.5 for 150%). Only available when <code>Text Style</code> is <strong>Unlinked</strong>.</td></tr><tr><td><code>is Italic</code></td><td>Whether the text should be displayed in italic style. Only available when <code>Text Style</code> is <strong>Unlinked</strong>.</td></tr><tr><td><code>Text Color</code></td><td>The color of the text in HEX format (e.g., <code>#000000</code>).</td></tr><tr><td><code>Highlight Color</code></td><td>The background color behind the text for highlighting effects.</td></tr><tr><td><code>Text Decoration</code></td><td>Adds decorative lines to text (underline, overline, line-through).</td></tr><tr><td><code>Text Decoration Color</code></td><td>The color of the text decoration lines.</td></tr></tbody></table>

### Default Properties

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

### Use Cases

You’ll typically use **Text** for:

* **Labels & Titles**
  * Form labels (Name, Email)
  * Section headers (Overview, Analytics, Orders)
  * Button-like captions inside other widgets
* **Dynamic Data**
  * Showing values from APIs (user name, balance, order count)
  * Displaying computed expressions (e.g., `₹${total}`)
  * Realtime values coming from state or controllers
* **Status & Feedback**
  * Empty state messages (“No data available”, “Nothing here yet”)
  * Success/error/info messages
  * Helper texts or hints below fields
* **Small Content Blocks**
  * Descriptions, help text, tooltips content, subtitles
  * Timestamp, tags, metadata under cards or list items

Basically, anywhere you need **read-only text** shown to the user, you use the Text widget.


---

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