Skip to content

Text

Overview

Text displays text as-is. If you have markdown text, use the Markdown component.

Examples

import mesop as me


def load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  on_load=load,
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  path="/text",
)
def text():
  with me.box(style=me.Style(margin=me.Margin.all(15))):
    me.text(text="headline-1: Hello, world!", type="headline-1")
    me.text(text="headline-2: Hello, world!", type="headline-2")
    me.text(text="headline-3: Hello, world!", type="headline-3")
    me.text(text="headline-4: Hello, world!", type="headline-4")
    me.text(text="headline-5: Hello, world!", type="headline-5")
    me.text(text="headline-6: Hello, world!", type="headline-6")
    me.text(text="subtitle-1: Hello, world!", type="subtitle-1")
    me.text(text="subtitle-2: Hello, world!", type="subtitle-2")
    me.text(text="body-1: Hello, world!", type="body-1")
    me.text(text="body-2: Hello, world!", type="body-2")
    me.text(text="caption: Hello, world!", type="caption")
    me.text(text="button: Hello, world!", type="button")

API

text

Create a text component.

PARAMETER DESCRIPTION
text

The text to display.

TYPE: str | None DEFAULT: None

type

The typography level for the text.

TYPE: Literal['headline-1', 'headline-2', 'headline-3', 'headline-4', 'headline-5', 'headline-6', 'subtitle-1', 'subtitle-2', 'body-1', 'body-2', 'caption', 'button'] | None DEFAULT: None

style

Style to apply to component. Follows HTML Element inline style API.

TYPE: Style | None DEFAULT: None

key

The component key.

TYPE: str | None DEFAULT: None