# 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](https://docs.digia.tech/ui-building-blocks/widgets/content-display-widgets/rich-text) 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="https://3626461507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhApDTL7kHrXte2TTtjs%2Fuploads%2Fgit-blob-03a60d46ab4ca17467f87da4c38a77dc1ec4956c%2Ftext_linked_vs_unlinked.jpg?alt=media" 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](https://docs.digia.tech/ui-building-blocks/widgets/default-properties "mention").

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