8.6 Released with 🥽 visionOS support and more!
Check it out

<Label> is a UI component that displays read-only text.

Note

The NativeScript <Label> is not the same as the HTML <Label>.

xml
<Label text="Hello NativeScript!" />

Examples ​

Formatting text inside a button ​

If you need to style parts of the text, you can use a combination of a FormattedString and Span elements.

xml
<Label textWrap="true">
  <FormattedString>
    <Span text="This text has a " />
    <Span text="red " style="color: red" />
    <Span text="piece of text. " />
    <Span text="Also, this bit is italic, " fontStyle="italic" />
    <Span text="and this bit is bold." fontWeight="bold" />
  </FormattedString>
</Label>

Props ​

letterSpacing ​

ts
letterSpacing: number

Gets or sets the letter spacing.

See MDN: CSS letter-spacing.

lineHeight ​

ts
lineHeight: number

Gets or sets the line height.

See MDN: CSS line-height.

text ​

ts
text: string

Gets or sets the text shown.

textAlignment ​

ts
textAlignment: 'initial' | 'left' | 'center' | 'right' = 'left'

Gets or sets the text alignment style property.

Defaults to left.

textDecoration ​

ts
textDecoration: TextDecorationType // "none" | "underline" | "line-through" | "underline line-through"

Gets or sets the text decoration style.

See TextDecorationType.

Defaults to none.

textTransform ​

ts
textTransform: TextTransformType // "initial" | "none" | "capitalize" | "uppercase" | "lowercase"

Gets or sets the text transform.

See TextTransformType.

Defaults to initial.

textWrap ​

ts
textWrap: boolean

Gets or sets whether the label should wrap longer text to new lines.

Default value is false.

whiteSpace ​

ts
whiteSpace: WhiteSpaceType // "initial" | "normal" | "nowrap"

Gets or sets white-space handling.

See WhiteSpaceType and MDN: CSS white-space.

Defaults to initial.

...Inherited ​

For additional inherited properties, refer to the API Reference.

Native component ​

Previous
Image