# Label Component

## Overview

The label component is used to display read-only text and can be made clickable using blocks.

Labels work alongside other user interface components like buttons, images, and text inputs to create a cohesive and intuitive user experience. 

<figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Fe9rjthSePMF9v2R3078Z%2Flabel_screen.png?alt=media&#x26;token=0eabe5eb-c9f3-4079-bb06-e0fc8810e4ac" alt=""><figcaption></figcaption></figure>

## Properties

You can customize your label using the following properties:&#x20;

### Label

<table><thead><tr><th width="216.69525053355846">Property</th><th width="183.58335031860162">Value</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td>Text</td><td>Text that appears on the label</td></tr><tr><td>Font</td><td>Select from menu</td><td>Font used to display label's text</td></tr><tr><td>Custom Font (mobile only)*</td><td>OTF or TTF file</td><td>Font used to display label's text</td></tr><tr><td>Color</td><td>Color</td><td>Color of the text that appears on the label</td></tr><tr><td>Font Weight</td><td>True/False</td><td>Make the label's text bold</td></tr><tr><td>Font Style</td><td>True/False</td><td>Make the label's text italicized</td></tr><tr><td>Underline</td><td>True/False</td><td>Underline the label's text</td></tr><tr><td>Strikethrough</td><td>True/False</td><td>Apply strikethrough formatting to the label's text. You can further select the strikethrough's color and style. </td></tr><tr><td>Text Align</td><td>Select from menu</td><td>Set alignment of the text relative to the label's outline</td></tr><tr><td>Font Size</td><td>Number</td><td>Size of the text that appears on the label</td></tr><tr><td>Number Of Lines</td><td>Number</td><td>Maximum amount of lines of text that your label will display</td></tr></tbody></table>

{% hint style="info" %}
Custom Fonts may only be available for Creators on certain Thunkable plans. [Read more about our pricing plans here.](https://thunkable.com/#/pricing)
{% endhint %}

### Advanced Properties

| Property                                           | Value                                             | Description                            |
| -------------------------------------------------- | ------------------------------------------------- | -------------------------------------- |
| <p>Writing Direction </p><p>(iOS and web only)</p> | Select from list `[left-to-right, right-to-left]` | Writing direction of your label's text |
| <p>Letter Spacing </p><p>(iOS and web only)</p>    | number                                            | Spacing between letters of your label  |

### **Layout**

<table><thead><tr><th width="160.57888762769582">Property</th><th width="173">Value</th><th>Description</th></tr></thead><tbody><tr><td>X</td><td>coordinate value</td><td>Position of the upper left corner of the label on the X-axis, where the left side of the screen is X=0.</td></tr><tr><td>Y</td><td>coordinate value</td><td>Position of the upper left corner of the label on the Y-axis, where the top of the screen is Y=0.</td></tr><tr><td>Height</td><td>number in pixels</td><td>The label's height is defined by a custom number of pixels.</td></tr><tr><td>Width</td><td>number in pixels</td><td>The label's width is defined by a custom number of pixels.</td></tr><tr><td>Resize Mode</td><td>Stretch</td><td>Stretches the label's to fit the dimensions of the device's screen.</td></tr><tr><td>Resize Mode</td><td>Float in Place</td><td>Renders the label in the same aspect ratio as the design, regardless of the device size.</td></tr></tbody></table>

### Style

<table><thead><tr><th width="197.33333333333331">Property</th><th width="252">Value</th><th>Description</th></tr></thead><tbody><tr><td>Visible</td><td>visible</td><td>Users can see the label.</td></tr><tr><td>Visible</td><td>invisible</td><td>Users cannot see the label.</td></tr><tr><td>Background Color</td><td>color</td><td>The background color of the label.</td></tr><tr><td>Border: Style</td><td>solid</td><td>The label's border is a solid line.</td></tr><tr><td>Border: Style</td><td>dotted</td><td>The label's border is a dotted line.</td></tr><tr><td>Border: Style</td><td>dashed</td><td>The label's border is a dashed line.</td></tr><tr><td>Border: Color</td><td>color</td><td>The label's border is the color selected. </td></tr><tr><td>Border: Width</td><td>number in pixels</td><td>The width of the label's border is defined by a custom number of pixels.</td></tr><tr><td>Border: Radius</td><td>number in pixels</td><td>The radius of the label border’s corners is defined by a custom number of pixels.</td></tr><tr><td>Shadow: Color</td><td>color</td><td>The label's shadow is the color selected. </td></tr><tr><td>Shadow: Opacity</td><td>number between 0 and 100</td><td>The opacity of the label's shadow. </td></tr><tr><td>Shadow: Radius</td><td>number in pixels</td><td>The radius of the label shadow’s corners is defined by a custom number of pixels.</td></tr><tr><td>Shadow: Offset</td><td>number in pixels</td><td>How far the label's shadow should be offset, in height and width, is defined by a custom number of pixels.</td></tr></tbody></table>

## Label Blocks

To access the blocks specific to the label component:

1. On the Design tab, add a **Label** component to a screen.
2. Navigate to the **Blocks** tab.
3. In the component tree on the left, click the name of the label component.
4. A drawer of label-specific blocks opens.

| Block Image                                                                                                                                                                                                                                                                                         | Description                                                                                                                                                                                                                                                           |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F9cDeXaWHzg3J4yuIpT81%2Fimage.png?alt=media\&token=3594bf56-3b87-42d8-b702-cf0f0923c878)                                                                        | This event will fire when the user clicks on the label.                                                                                                                                                                                                               |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FjNuLmdKpCqRAN0XMHthX%2Fimage%2016.png?alt=media\&token=94c894c4-ab05-4164-ac51-1c4f27df579e)                                                                   | Set the label's text. This property corresponds to the text that is displayed in the label component.                                                                                                                                                                 |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FjdmkCMX1uWM8NlXuZCTx%2Fimage%2017.png?alt=media\&token=9e048776-40a1-477d-96c1-d39ed3c68d78)                                                                   | Get the label's text.                                                                                                                                                                                                                                                 |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FeEgJ2FmaQq8qk1PrLUBP%2Fimage%203.png?alt=media\&token=55d55974-ceed-46c0-9166-5687971788be)                                                                    | Set the label's font size.                                                                                                                                                                                                                                            |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FgYBr7M9VjUtXOviGJgi6%2Fimage%204.png?alt=media\&token=59aeeb3c-aca2-49e7-9032-6be58df345b0)                                                                    | Get the label's font size.                                                                                                                                                                                                                                            |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F71wNaUq9jkvp3oI5nlJH%2Fimage.png?alt=media&#x26;token=e9b4275d-6bc8-4e13-9ff9-071a2e5795a6" alt=""><figcaption></figcaption></figure></div> | Set the label's font.                                                                                                                                                                                                                                                 |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FsFERk41KZPKbYJNR3Yfn%2Fimage.png?alt=media&#x26;token=dd88a3af-6c2f-41bd-8e64-4d7d65b4c217" alt=""><figcaption></figcaption></figure></div> | Get the label's font.                                                                                                                                                                                                                                                 |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F4r6kzt0mi3F8SrQfEEMw%2Fimage.png?alt=media&#x26;token=c663ea96-8312-476f-ada9-152bc2b238e0" alt=""><figcaption></figcaption></figure></div> | Set the label's custom font.                                                                                                                                                                                                                                          |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FvTcJrFiTcysHbXdkNR0D%2Fimage.png?alt=media&#x26;token=9752fbdd-0872-4aa9-ab2a-25af7cceaba5" alt=""><figcaption></figcaption></figure></div> | Get the label's custom font.                                                                                                                                                                                                                                          |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FONUU9R7TAGplbXiQXMDi%2Fimage%2014.png?alt=media\&token=3a3e17c2-a9d3-4c96-b075-c6d17d919fb1)                                                                   | Set the label's number of lines.The number of lines property is used to work with the maximum number of lines of text that should be displayed in a label before that label starts to scroll.                                                                         |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F5m71uUat4wAqeebchodu%2Fimage%2015.png?alt=media\&token=1e5dba43-d884-4e29-a4ac-e47ff16fd8b5)                                                                   | Get the label's number of lines.                                                                                                                                                                                                                                      |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FvpFYDfV6N4VkkyF9Ib4o%2Fimage.png?alt=media&#x26;token=ea655c9f-2551-4638-88ae-52e85a49c7ed" alt=""><figcaption></figcaption></figure></div> | Set the label's line height.                                                                                                                                                                                                                                          |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FcA7Tqr5Yp5t4q3xeXb8F%2Fimage.png?alt=media&#x26;token=ad238cfb-d1e2-4519-889d-ac45d10f9a98" alt=""><figcaption></figcaption></figure></div> | Get the label's line height.                                                                                                                                                                                                                                          |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FrxbBDGDrDlUPX5ITvORg%2Fimage%2013.png?alt=media\&token=4688838f-a32c-4a41-b76d-20e732bbe294)                                                                   | Set the label's color. Best practice is to use one of the [color blocks](https://docs.thunkable.com/blocks/blocks/color) to set this value, but HEX or RGB values may be used too.                                                                                    |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FV56jWfZ8SrTZ8ktPU6ku%2Fimage%2012.png?alt=media\&token=1081ecb8-5b37-4532-b300-7160b4ecf6d5)                                                                   | Get the label's color.                                                                                                                                                                                                                                                |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F4PhGFYsInQL1MxEt5nmh%2Fimage%202.png?alt=media\&token=64287c50-c452-494f-8c48-7894f62cab30)                                                                    | Set the label's background color with the color of the label itself i.e. the region behind the label text. Best practice is to use one of the [color blocks](https://docs.thunkable.com/blocks/blocks/color) to set this value but HEX or RGB values may be used too. |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FKKWFT82gmsHvp2893o0K%2Fimage%201.png?alt=media\&token=c0d2200e-df5f-4644-9c29-5791cbe96b54)                                                                    | Get the label's background color.                                                                                                                                                                                                                                     |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FqdMl4z8nKoXQAOkUyyOj%2Fimage%206.png?alt=media\&token=416cb3b2-8064-4e68-af45-da2e5ea1e9f9)                                                                    | Set the label's font style. The font style property can be either "Normal" or "*Italic".*                                                                                                                                                                             |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FYuAtQbvqpNTYiiQO0g6H%2Fimage%205.png?alt=media\&token=c69a1bce-9bfe-42cd-a7ac-a1e82ae1f127)                                                                    | Get the label's font style.                                                                                                                                                                                                                                           |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FjI3eErPni4oqWPK9Z22q%2Fimage%207.png?alt=media\&token=bb90aa13-70c0-4756-8c1c-e2aefc2ede81)                                                                    | Set the label's font weight. The font weight value can be either "Normal", "**Bold**" or a value from 100 to 900                                                                                                                                                      |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FdT8gidHXGvPIRJMRLfzz%2Fimage%208.png?alt=media\&token=9217fec0-8385-415b-ae9e-ae7811c458d1)                                                                    | Get the label's font weight.                                                                                                                                                                                                                                          |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F1N4tTo8d5cIsNS9wLwQW%2Fimage%2018.png?alt=media\&token=da03a7ea-5b6d-4560-aa61-b82b1ce5dcb1)                                                                   | <p></p><p>Set the label's Text Align. Text Align can be any of the following values: Auto, Left, Right, Center, or Justify.</p>                                                                                                                                       |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FZ2diRICzcxnhOcS5d6yA%2Fimage%2019.png?alt=media\&token=e38919ab-65f2-4555-905d-bf2b99956e4e)                                                                   | Get the label's Text Align.                                                                                                                                                                                                                                           |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Fexqnk8co3W5NkVMz56sq%2Fimage.png?alt=media&#x26;token=9fc3cc22-e0e4-4ab3-b30d-be6beb462456" alt=""><figcaption></figcaption></figure></div> | Set the label's border color. Best practice is to use one of the [color blocks](https://docs.thunkable.com/blocks/blocks/color) to set this value but HEX or RGB values may be used too.                                                                              |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Fuax291Mtz9ySSPQP0lCr%2Fimage.png?alt=media&#x26;token=6df5a27c-a79f-4713-abf1-9f6b559e848c" alt=""><figcaption></figcaption></figure></div> | Get the label's border color.                                                                                                                                                                                                                                         |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FH1Nk7luTmlpbJ52C21bm%2Fimage.png?alt=media&#x26;token=efe2c2ba-e206-4deb-8941-eb1fb255615c" alt=""><figcaption></figcaption></figure></div> | Set the label's border width.                                                                                                                                                                                                                                         |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FPxOl8HlyPTJmsDDvOw4o%2Fimage.png?alt=media&#x26;token=2262cdf0-935d-4aac-be1c-0876727c7090" alt=""><figcaption></figcaption></figure></div> | Get the label's border width.                                                                                                                                                                                                                                         |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FpjXh2dV7v3o0g3Ij5qHr%2Fimage%2010.png?alt=media\&token=ca4f27c6-4832-4e59-b496-52a5236667ea)                                                                   | <p></p><p>Set the label's height. Acceptable input values are: Number of Pixels, Percentage Height, "Fit Contents", or "Fill Container."</p>                                                                                                                          |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FODuMZca22jEb0lKVME8g%2Fimage%209.png?alt=media\&token=a1c7e34d-c4c3-4e29-8175-b132c53b3721)                                                                    | Get the label's height.                                                                                                                                                                                                                                               |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F3TD6OcI1V3FkFurvbJN6%2Fimage%2011.png?alt=media\&token=18887cc1-e360-4bc9-bfa2-f607038e9422)                                                                   | The `Computed Height` block gets the on-screen dimensions of the label, after it has been rendered on-screen. The value returned is an integer, representing the size of the label in pixels.                                                                         |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FFbWQyRMEQvI2KYvsAe8i%2Fimage%2023.png?alt=media\&token=fe7ad1cc-787d-4129-b61f-04d61bd919d3)                                                                   | Set the label's width. The width blocks work with the Width property of the label component. Acceptable values are.‌                                                                                                                                                  |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FMp1sq5675p2OJj8Z0LmJ%2Fimage%2022.png?alt=media\&token=93f232f0-02a1-4b48-8b3b-513ed651ab3a)                                                                   | Get the label's width.                                                                                                                                                                                                                                                |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FvflDF6Tfk9CwbQJJCUzh%2Fimage%2024.png?alt=media\&token=adffc39b-280e-4881-a975-8ab0e705c2cb)                                                                   | The `Computed Width` block gets the on-screen dimensions of the label, after it has been rendered on-screen. The value returned is an integer, representing the size of the label in pixels.                                                                          |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FIx7IwM6A8sXKzEMFCoyK%2Fimage%2020.png?alt=media\&token=de8626c3-dbaf-4811-a6c5-f0e9271eece7)                                                                   | Set the label's Visibility. The visible blocks are used to show or hide the entire image component. Acceptable values are: true or false.                                                                                                                             |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FmikuzmL3kYh55Dd68czp%2Fimage%2021.png?alt=media\&token=4816fef1-6878-467d-8ff8-e12f87235cb6)                                                                   | Get the label's Visibility.                                                                                                                                                                                                                                           |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Fusd7rBvzEaWxu9u5dmyg%2Fimage.png?alt=media&#x26;token=8ccafabf-9045-42c8-af50-fb74bba1ed7d" alt=""><figcaption></figcaption></figure></div> | Set the label's X coordinate.                                                                                                                                                                                                                                         |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FQyHdPA4FKHlbTlc9ftVN%2Fimage.png?alt=media&#x26;token=f866a683-5e96-4f2a-8494-5fa34c7569fb" alt=""><figcaption></figcaption></figure></div> | Get the label's X coordinate.                                                                                                                                                                                                                                         |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F8TlWCJ44aSxDdc9h83FY%2Fimage.png?alt=media&#x26;token=ed07dea8-5250-4911-ba19-91d59e87b919" alt=""><figcaption></figcaption></figure></div> | Set the label's Y coordinate.                                                                                                                                                                                                                                         |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FE3bqS33ugV58B9pe8LXh%2Fimage.png?alt=media&#x26;token=2bc768ce-e1cc-4a46-81b1-d1c8f7f27316" alt=""><figcaption></figcaption></figure></div> | Get the label's Y coordinate.                                                                                                                                                                                                                                         |