SimpleLabel

SimpleLabel component for displaying a single line of text

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

SimpleLabel(props: ISimpleLabelProps): JSX.Element

Description

SimpleLabel component for displaying a single line of text.

SimpleLabel is a lightweight complement to the Label node. It supports simplified font style specification and is more memory efficient than the Label node.

Use SimpleLabel when you need basic text rendering without the advanced features of the Label node (such as multi-line text, wrapping, or truncation).

Origin-based Positioning:
Unlike most nodes where translation moves the top-left corner, SimpleLabel uses origin-based positioning. The horizOrigin and vertOrigin fields determine which part of the text is positioned at the translation point.

Parameters

Example

// Basic usage with system font
<simpleLabel
    text="Hello World"
    fontUri="font:MediumBoldSystemFont"
    translation={[100, 100]}
/>

// Centered text at a specific position
<simpleLabel
    text="Centered Text"
    fontUri="font:LargeSystemFont"
    horizOrigin="center"
    vertOrigin="center"
    translation={[960, 540]}
/>

// Custom font with specific size
<simpleLabel
    text="Custom Font"
    fontUri="font:SystemFontFile"
    fontSize={24}
    color="#FF6B6BFF"
/>

Types

ISimpleLabelProps

Properties for the SimpleLabel node.

SimpleLabel is a lightweight component for displaying a single line of text. It is more memory efficient than the Label node and supports simplified font style specification.

Features:

• Built-in system fonts or TrueType/OpenType font files
• Customizable text color
• Flexible horizontal and vertical origin positioning
• Rotation support (center of rotation determined by origin point)

Example

<SimpleLabel
    text="Hello World"
    fontUri="font:MediumBoldSystemFont"
    color="#FFFFFFFF"
    horizOrigin="center"
    vertOrigin="baseline"
/>

Extends IGroupProps.

ISimpleLabelProps.fontSize

Specifies the size of the font in points.

Note: This field is only respected when using variable size system fonts (font:SystemFontFile or font:BoldSystemFontFile) or custom font files. Fixed size system fonts ignore this value.

ISimpleLabelProps.fontUri

Specifies either a path to a TrueType/OpenType font file or a built-in system font name.

For TrueType or OpenType font files, the file must be included with the application (e.g., pkg:/fonts/SomeFontFile.ttf). If no fontUri is specified, the System Default font is used.

Fixed Size System Fonts (fontSize field is ignored):

• font:SmallestSystemFont
• font:SmallSystemFont
• font:MediumSystemFont
• font:LargeSystemFont
• font:SmallestBoldSystemFont
• font:SmallBoldSystemFont
• font:MediumBoldSystemFont
• font:LargeBoldSystemFont

Variable Size System Fonts (fontSize field is respected):

• font:SystemFontFile
• font:BoldSystemFontFile

ISimpleLabelProps.horizOrigin

Controls the horizontal origin (x=0 position) of the SimpleLabel's local coordinate system.

• "left": Left edge of text is at x=0
• "center": Horizontal center of text is at x=0
• "right": Right edge of text is at x=0

ISimpleLabelProps.vertOrigin

Controls the vertical origin (y=0 position) of the SimpleLabel's local coordinate system.

• "top": Top edge of text is at y=0
• "center": Vertical center of text is at y=0
• "baseline": Text baseline is at y=0
• "bottom": Bottom edge of text is at y=0

VertOrigin

Vertical origin options for SimpleLabel positioning. Controls the y=0 position of the SimpleLabel node's local coordinate system.

• "top": Top edge of the text is at the 0 y-coordinate
• "center": Vertical center of the text is at the 0 y-coordinate
• "baseline": Baseline of the text is at the 0 y-coordinate
• "bottom": Bottom edge of the text is at the 0 y-coordinate

type VertOrigin = "top" | "center" | "baseline" | "bottom";