<!-- Generated by npm run gen:skill from ui/Button/skill.md - do not edit. -->

# Button

## `<button>`

- `icon-align`: left | right
- `icon`, `selected`, `value`, `submenu` (name of a menu in the same view), `default`
- actions: busy, release, select
- events: Release, Select
- methods: toggleCheckable

```xml
<application name="ButtonExample2" instances="0">
  <about loader="false"/>
  <view name="v2" width="200" height="80">
    <panel type="rows" gap="8" padding="5">
      <button name="save" text="Save" icon="icon://save?look=lucide" width="120"/>
      <button name="next" text="Next" icon="icon://arrow-right?look=lucide" icon-align="right" width="120"/>
    </panel>
  </view>
</application>
```

## Guidance

- `<trigger view="v" component="save" event="Select" step="..."/>`; change the label with the `set` action.
- `busy` action: a spinner replaces the label and the button is disabled until `enable` (or `disable`) ends it.
- `selected="false"` makes a toggle (Select pressed, Release released); such buttons as direct children of a `group mode="mutex"` (or `"toggle"`) are one choice: the group's value is the pressed button's `value`, else its name. `toggleCheckable` shows a state on it without Select or Release.
- `submenu="m"` opens the menu `m` written in the view. At most one `default="true"` per view: Enter anywhere fires it.
- An icon-only button needs `title` naming the action.
