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