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://mesop-dev.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