Button

Overview¶

Button is based on the Angular Material button component.

Examples¶

import mesop as me


@me.page(
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  path="/button",
)
def main():
  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(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`