Component | Text

Render text

Node.js

ui.text("Hello world!")

Python

ui.text("Hello world!")

Color & Size

Use the color and size properties to quickly change the appearance of the text. See the API reference below for the full list of supported values for each.

Node.js

page.add(() => ui.stack(
    [
        ui.text("Users", { color: "primary", size: "xl" }),
        ui.text("10 users found in database.", { color: "text-secondary" })
    ],
    { spacing: "4px" }
))

Python

page.add(lambda: ui.stack(
    [
        ui.text("Users", color="primary", size="xl"),
        ui.text("10 users found in database.", color="text-secondary")
    ],
    spacing="4px"
))

Nested Text

You can nest text components to create more complex text structures.

Node.js

page.add(() => ui.text([
    "It is ",
    ui.text("very important", { color: "warning", style: { fontWeight: "600" }}),
    " very important that you know this..."
]))

Python

page.add(lambda: ui.text([
    "It is ",
    ui.text("very important", color="warning", style={"fontWeight": "600"}),
    " very important that you know this..."
]))

API reference

Function signature

Node.js

ui.text(
    text: string | TextComponent | Array<string | TextComponent>,
    properties?: Partial<{
        color: "text" | "text-secondary" | "primary" | "success" | "warning" | "danger" | "background",
        size: "xs" | "sm" | "md" | "lg" | "xl",
        style: Style
    }>
)

Python

ui.text(
    text: str | TextComponent | list[str | TextComponent],
    *,
    color: Literal["text", "text-secondary", "primary", "success", "warning", "danger", "background"] = "text",
    size: Literal["xs", "sm", "md", "lg", "xl"] = "md",
    style: Style | None = None
)

Parameters

Node.js

text

required string | TextComponent | Array<string | TextComponent>

The text to be displayed.

Python

text

required string | TextComponent | list[string | TextComponent]

The text to be displayed.

---

Node.js

properties.color

optional string literalSDK v0.19.1+

Specifies the color of the text. Defaults to "text"

Options:

• "text": Default text color
• "text-secondary": Secondary text color, uses a lighter shade of the default text color
• "primary": Primary color. Defaults to a shade of blue. Can be set via the theme.
• "success": Success color, green.
• "warning": Warning color, orange.
• "danger": Danger color, red.
• "background": Background color. Can be used over inverted backgrounds.

Python

color

optional LiteralSDK v0.19.1+

Specifies the color of the text. Defaults to "text"

Options:

• "text": Default text color
• "text-secondary": Secondary text color, uses a lighter shade of the default text color
• "primary": Primary color. Defaults to a shade of blue. Can be set via the theme.
• "success": Success color, green.
• "warning": Warning color, orange.
• "danger": Danger color, red.
• "background": Background color. Can be used over inverted backgrounds.

---

Node.js

properties.size

optional string literalSDK v0.19.1+

Specifies the size of the text. Defaults to "md"

Options:

• "xs": Extra small text
• "sm": Small text
• "md": Medium text
• "lg": Large text
• "xl": Extra large text

Python

size

optional LiteralSDK v0.19.1+

Specifies the size of the text. Defaults to "md"

Options:

• "xs": Extra small text
• "sm": Small text
• "md": Medium text
• "lg": Large text
• "xl": Extra large text

---

Node.js

properties.style

optional Style

Directly style the underlying element using CSS. See the styling guide for more details on available style properties.

Python

style

optional Style | None

Directly style the underlying element using CSS. See the styling guide for more details on available style properties.

---