Simple button example

[Fit2030]

Looking for a simple example code using a single button. Perhaps change button text on clicking.

[a.lapinski · Accepted solution]

Add folowing to widgets.gui
   <link rel="import" href="/mnt/sysassets/widgets/push_button_widget.gui" />

Then you have to add button in index.gui, for example green button like this below
  <svg>
   <use id="button" href="#push-button" y="65" height="80" fill="fb-green" font-family="System-Regular" font-size="50">
    <set href="#text" attributeName="text-buffer" to="Click Me!" />
    <set href="#text" attributeName="fill" to="fb-white" />
    <set href="#text" attributeName="y" to="20" />
   </use>
  </svg>

In app/index.js you have use JavaScript to handle click event

  import document from "document";

  let button = document.getElementById("button");
  button.onactivate = function(evt) {
    button.text = "Clicked";
  }

For more info please refer to Fitbit buttons guide

https://dev.fitbit.com/build/guides/user-interface/components/buttons/