---
title: "Perspective - Label"
description: "The Label component displays text and can be customized."
---

# Perspective - Label

> The Label component displays text and can be customized.

![](image2018-6-13_8-45-44.png)

**Component Palette Icon**:  

![](2019-05-07_9-26-11.png)

## Description
The Label component displays text and can be customized with a full menu of [style options](appendix/reference-pages/style-reference.md) for the appearance of text, background, border, color, etc. You can use bindings to display additional information on the Label component. 

## Properties

Most Properties have binding options. For more information on Bindings, see [Types of Bindings in Perspective](ignition-modules/perspective/working-with-perspective-components/bindings-in-perspective/bindings-in-perspective.md).
This section only documents the Props Category of properties. The other Categories are described on the [Perspective Component Properties](ignition-modules/perspective/working-with-perspective-components/perspective-component-properties.md) page.

| Name            | Description      | Property Type  |
| --------------- | -------------- | -------------- |
|text|Text to display. Text can also be entered directly to the label by deep selecting the component, which enables inline editing. Changes are immediately reflected in the text property field. |value: string|
|alignVertical|Vertical alignment of the text within the component (top, center, or bottom), based on the dimensions of the component. Default is top.|value: string|
|textStyle| Sets a style for the text within this label. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).  | object         |
| style           | Sets a style for this component. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).  | object         |

## Component Events

The [Perspective Event Types Reference](appendix/reference-pages/perspective-event-types-reference.md) page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The [Component Events and Actions](ignition-modules/perspective/working-with-perspective-components/component-events-and-actions.md) page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

## Example

### Example 1

![](2019-02-19_9-53-20.png)

| Property                | Value                                                                                  |
| ----------------------- | -------------------------------------------------------------------------------------- |
|props.text	|(Expression Binding)`"The time is : "+dateformat(now(),"h:mm a")`|
|props.style.borderStyle	|groove|
|props.style.padding	|12px|

### Example 2

![](lore-ipsum-label-amet.png)

| Property                | Value                                                                                  |
| ----------------------- | -------------------------------------------------------------------------------------- |
|props.text|	Lorem ipsum dolor sit amet, consectetur adipiscing elit.|
|props.textStyle.overflow	|hidden|
|props.textStyle.whiteSpace	|nowrap|
|props.textStyle.textOverflow|	ellipsis|
|props.style.borderStyle|	double|