# Label

## Style the Label <a href="#style-the-label" id="style-the-label"></a>

You can customize your label using the following properties:

### Properties <a href="#properties-1" id="properties-1"></a>

* **Text:** Text that appears on the label
* **Font Size:** Size of the text that appears on the label
* **Custom Font (mobile only)**: Upload a TTF or OTF font file to use as your Button's font

  <div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>Using Custom Fonts may only be available for Creators on certain Thunkable plans. Please refer to our pricing page for more information: <a href="https://thunkable.com/pricing">Thunkable pricing</a>.</p></div>
* **Color:** Color of the text that appears on the label
* **Background Color:** Sets the background color of the label
* **Text Align**
  * **Auto -** Aligns the text automatically
  * **Left -** Displays the text starting from the left of the label
  * **Right -** Displays the text starting from the right of the label
  * **Center -** Displays the text starting from the middle of the label
  * **Justify -** Aligns both the right and left side of the text equally
* **Font Style**
  * **Normal:** Default text display
  * **Italic:** Display the text in italics
* **Font Weight:** Select how bold the text on the label will be
* **Number of Lines:** set a maximum amount of lines of text that your Label will display
* **Background Color:** set the color of your Label's background
* **Border Width:** Enter how wide you want the border outline of the label to be
* **Border** **Radius:** Enter how round you want the edges of the border for the label to be
* **Border Color:** Pick a color for the border of the label
* **Border Style:** Select if you want the border of the label to be a dotted, dashed or solid line
* **Background Color:** set the color of your Label's background
* **Border Width:** Enter how wide you want the border outline of the label to be
* **Border** **Radius:** Enter how round you want the edges of the border for the label to be
* **Border Color:** Pick a color for the border of the label
* **Border Style:** Select if you want the border of the label to be a dotted, dashed or solid line

### Advanced Properties <a href="#advanced-properties" id="advanced-properties"></a>

* **Letter Spacing (iOS and web only):** increase spacing between letters of your Label
* **Text Decoration Line:** add a line through, underline, or both with underline line-through
* **Text Decoration Style (iOS and web only):** set your Text Decoration line to be solid, dotted, dashed, or double
* **Text Decoration Color (iOS and web only):** set the color of your Text Decoration Line
* **Writing Direction (iOS and web only):** set the writing direction of your Label's text
* **Letter Spacing (iOS and web only):** increase spacing between letters of your Label
* **Text Decoration Line:** add a line through, underline, or both with underline line-through
* **Text Decoration Style (iOS and web only):** set your Text Decoration line to be solid, dotted, dashed, or double
* **Text Decoration Color (iOS and web only):** set the color of your Text Decoration Line
* **Writing Direction (iOS and web only):** set the writing direction of your Label's text

## Events <a href="#events" id="events"></a>

### Click <a href="#click" id="click"></a>

This event will fire when the user clicks on the label.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5guzt3PT-bmFFNgtV%2F-MA5jXwBVyl0JQnJHoAV%2Fla_click.png?alt=media\&token=9b19a208-53ce-4079-a5c5-b9a51416e0c5)

## Properties <a href="#properties" id="properties"></a>

The get and set background color properties work 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/v/drag-and-drop/color) to set this value but HEX or RGB values may be used too.

### Background Color <a href="#background-color" id="background-color"></a>

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5guzt3PT-bmFFNgtV%2F-MA5jcgRm8-zG0squi6c%2Fla_bg_color.png?alt=media\&token=097c7de8-04c2-4493-8d43-bb366c7b6163)

### Color <a href="#color" id="color"></a>

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5guzt3PT-bmFFNgtV%2F-MA5k804bCl7leZVIa8f%2Fla_color.png?alt=media\&token=c48de344-bb1f-4566-9bb5-1bb3080280fe)

### Font Size <a href="#font-size" id="font-size"></a>

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5guzt3PT-bmFFNgtV%2F-MA5kUpyFoezeR-3NGgh%2Fla_font_size.png?alt=media\&token=522f8cf3-8ed5-4181-8b95-626032cd6584)

### Font Style <a href="#font-style" id="font-style"></a>

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5guzt3PT-bmFFNgtV%2F-MA5lGQn11sor5aehwpj%2Fla_font_style.png?alt=media\&token=283eec13-dbc1-421a-888a-e32ecd854a16)

### Font Weight <a href="#font-weight" id="font-weight"></a>

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5guzt3PT-bmFFNgtV%2F-MA5lHjIKaZB8aGi8_WD%2Fla_font_weight.png?alt=media\&token=993ce0f7-8e02-4907-a513-8dc947bd099c)

### Height <a href="#height" id="height"></a>

The set and get height blocks work with the Height property of the label component. Acceptable input values are:

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5guzt3PT-bmFFNgtV%2F-MA5lJ2Cj8-WgTuBCJxp%2Fla_height.png?alt=media\&token=40b43eab-256b-4f40-abda-b26e95d01cb7)

* Number of Pixels
* Percentage Height
* "Fit Contents"
* "Fill Container"

### Number of Lines <a href="#number-of-lines" id="number-of-lines"></a>

The get and set 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://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5guzt3PT-bmFFNgtV%2F-MA5lK7wK8TiOtY_FKJf%2Fla_num_lines.png?alt=media\&token=3490a026-11dd-47a6-8357-d50e19e3e318)

### Text <a href="#text" id="text"></a>

This property corresponds to the text that is displayed in the label component.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5guzt3PT-bmFFNgtV%2F-MA5lM3seyM91z4W2DM2%2Fla_text.png?alt=media\&token=d859cabf-9f1e-422c-bb1f-aa6c8789c36e)

### Text Align <a href="#text-align" id="text-align"></a>

Text Align can be any of the following values:

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5guzt3PT-bmFFNgtV%2F-MA5lVRBvYmPPH8nyG_f%2Fla_text_align.png?alt=media\&token=6c9dd9f2-9087-4da5-992e-81cf6308794c)

* Auto
* Left
* Right
* Center
* Justify

### Visible <a href="#visible" id="visible"></a>

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5guzt3PT-bmFFNgtV%2F-MA5l_DPXy5tmSrbT0W1%2Fla_visible.png?alt=media\&token=e59ff9db-3ac2-413c-b578-350fe7f8a7bc)

* True
* False

### Width <a href="#width" id="width"></a>

The set and get width blocks work with the Width property of the label component.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5guzt3PT-bmFFNgtV%2F-MA5lYqOCjH1Lcr-gAtl%2Fla_widrth.png?alt=media\&token=250ab30f-d4f1-467c-99af-8ef8435b7b38)

* Number of Pixels
* Percentage Width
* "Fit Contents"
* "Fill Container"


---

# 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.thunkable.com/snap-to-place/label.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.