Label

Label component for displaying single-style text

import { Label } from "@roku-sdk/components";

Label(props: ILabelProps): JSX.Element

Description

Label component for displaying single-style text.

The Label node is used to display a string of text with a single font, size, and color. It provides extensive control over text layout, wrapping, and ellipsization.

Parameters

Name	Type	Description
`props`	ILabelProps

Example

<label
    text="Hello, World!"
    font={SystemFont.Large}
    color="#FFFFFFFF"
    width={400}
    wrap={true}
    horizAlign="center"
/>

Types

ILabelProps

Properties for the Label node.

Label is used to display a string of text with a single style. It extends LabelBase with additional properties for line spacing and text truncation control.

Name	Type	Description
`leadingEllipsis?`	`boolean`	Specifies whether to display the end or beginning of text that overflows its available width. When true, the end of the text is shown with leading ellipsis (e.g., "...jumps over the lazy dog"). When false, the start of the text is shown with trailing ellipsis (e.g., "the quick brown fox jumps...").
`lineSpacing?`	`number`	If the text is displayed on more than one line, specifies the amount of additional space added between lines (in pixels).
`onWrappedLines?`	`EventHandler<number>`	Event fired when the wrappedLines value changes. The handler receives the number of wrapped lines currently displayed in the label.
`truncateOnDelimiter?`	`string`	See below.

Extends ILabelBaseProps.

ILabelProps.truncateOnDelimiter

If the width field value is greater than zero, provides a set of characters used to determine how to truncate the last line of text that extends beyond the specified width. If none of the characters in the last line of text are included in the truncateOnDelimiter field value string, the entire last line is not displayed. When set to a non-empty string, the ellipsizeOnBoundary field value is ignored.