Buttons don't get executed

[SpielerNogard]

Describe the bug

When nesting a button in another component (like a stack) the button don't seem to work.

Environment

{
  "marimo": "0.9.27",
  "OS": "Darwin",
  "OS Version": "24.1.0",
  "Processor": "arm",
  "Python Version": "3.12.7",
  "Binaries": {
    "Browser": "131.0.6778.86",
    "Node": "v22.9.0"
  },
  "Dependencies": {
    "click": "8.1.7",
    "docutils": "0.21.2",
    "itsdangerous": "2.2.0",
    "jedi": "0.19.2",
    "markdown": "3.7",
    "narwhals": "1.14.2",
    "packaging": "24.2",
    "psutil": "6.1.0",
    "pygments": "2.18.0",
    "pymdown-extensions": "10.12",
    "pyyaml": "6.0.2",
    "ruff": "0.8.1",
    "starlette": "0.41.3",
    "tomlkit": "0.13.2",
    "typing-extensions": "4.12.2",
    "uvicorn": "0.32.1",
    "websockets": "14.1"
  },
  "Optional Dependencies": {
    "altair": "5.5.0",
    "pandas": "2.2.3",
    "pyarrow": "18.1.0"
  }
}

Code to reproduce

import marimo as mo
query_params = mo.query_params()

function_name = 'my-test-function'
mo.vstack(
        [
            mo.ui.button(
                value="dashboard",
                on_click=lambda *args, **kwargs: query_params.set("site", "dashboard"),
            ),
            mo.md(f"#### {function_name}"),
        ]
    )

[mscolnick]

@SpielerNogard, the button cannot be inlined, and instead needs to be part of the global scope, since it is a UI element.

my_button = mo.ui.button(
    value="dashboard",
    on_click=lambda *args, **kwargs: query_params.set("site", "dashboard"),
)
mo.vstack(
    [
       my_button,
        mo.md(f"#### {function_name}"),
    ]
)

This FAQ briefly touches on it: https://docs.marimo.io/faq.html#why-aren-t-my-on-change-on-click-handlers-being-called

[akshayka]

If this was motivated by creating a dynamic number of buttons, that works to using mo.array(), which you can then insert in a vstack.

Example: https://marimo.app/l/23fkql

Closing as this is not a bug, but feel free to ask follow up usage questions in our Discord.