Skip to content

Button

Overview

Button is based on the Angular Material button 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="/button",
)
def main():
  with me.box(style=me.Style(margin=me.Margin.all(15))):
    me.text("Button types:", style=me.Style(margin=me.Margin(bottom=12)))
    with me.box(style=me.Style(display="flex", flex_direction="row", gap=12)):
      me.button("default")
      me.button("raised", type="raised")
      me.button("flat", type="flat")
      me.button("stroked", type="stroked")

    me.text(
      "Button colors:", style=me.Style(margin=me.Margin(top=12, bottom=12))
    )
    with me.box(style=me.Style(display="flex", flex_direction="row", gap=12)):
      me.button("default", type="flat")
      me.button("primary", color="primary", type="flat")
      me.button("secondary", color="accent", type="flat")
      me.button("warn", color="warn", type="flat")

API

button

Creates a simple text Button component.

PARAMETER DESCRIPTION
label

Text label for button

TYPE: str | None DEFAULT: None

on_click

click is a native browser event.

TYPE: Callable[[ClickEvent], Any] | None DEFAULT: None

type

Type of button style to use

TYPE: Literal['raised', 'flat', 'stroked'] | None DEFAULT: None

color

Theme color palette of the button

TYPE: Literal['primary', 'accent', 'warn'] | None DEFAULT: None

disable_ripple

Whether the ripple effect is disabled or not.

TYPE: bool DEFAULT: False

disabled

Whether the button is disabled.

TYPE: bool DEFAULT: False

style

Style for the component.

TYPE: Style | None DEFAULT: None

key

The component key.

TYPE: str | None DEFAULT: None

content_button

Creates a button component, which is a composite component. Typically, you would use a text or icon component as a child.

Intended for advanced use cases.

PARAMETER DESCRIPTION
on_click

click is a native browser event.

TYPE: Callable[[ClickEvent], Any] | None DEFAULT: None

type

Type of button style to use

TYPE: Literal['raised', 'flat', 'stroked', 'icon'] | None DEFAULT: None

color

Theme color palette of the button

TYPE: Literal['primary', 'accent', 'warn'] | None DEFAULT: None

disable_ripple

Whether the ripple effect is disabled or not.

TYPE: bool DEFAULT: False

disabled

Whether the button is disabled.

TYPE: bool DEFAULT: False

style

Style for the component.

TYPE: Style | None DEFAULT: None

key

The component key.

TYPE: str | None DEFAULT: None

ClickEvent dataclass

Bases: MesopEvent

Represents a user click event.

ATTRIBUTE DESCRIPTION
key

key of the component that emitted this event.

TYPE: str

is_target

Whether the clicked target is the component which attached the event handler.

TYPE: bool