# Mojo.Widget.Button

## Namespace Detail

### Overview

Buttons are the most basic UI element, which allow an action to be bound to a region. Buttons have a text label that can be updated dynamically. ButtonWidgets are automatically styled to look like other buttons within the webOS.

### Declaration

>     <div x-mojo-element="Button" id="buttonId" class="buttonClass" name="buttonName"></div>

Properties | Required | Value | Description
--- | --- | --- | ---
x-mojo-element | Required | Button | Declares the widget as type 'Button'.
id | Required | Any String | Identifies the widget element for use when instantiating or rendering; should be unique in the document.
class | Optional | Any String | All buttons belong to the class palm-button, but you can override this with a custom class.
name | Optional | Any String | Adds a unique name to the button widget; generally used in templates.

### Events

>     Mojo.Event.listen(this.controller.get("buttonId"),Mojo.Event.tap, this.handleUpdate);

Event Type | Value | Event Handling
--- | --- | ---
Mojo.Event.tap | None | Respond to button tap

### Instantiation

>     this.controller.setupWidget("buttonId",
>       this.attributes = {
>       },
>       this.model = {
>           label : "BUTTON",
>           disabled: false
>       }
>     );

### Attribute Properties

Attribute Property | Type | Required | Default | Description
--- | --- | --- | --- | ---
label | String | Optional | null | Button's label if none is supplied by the model
type | String | Optional | Mojo.Widget.defaultButton | Type options: Mojo.Widget.defaultButton - simple pushbutton Mojo.Widget.activityButton- pushbutton with spinner activated on tap of the button
disabledProperty | String | Optional | "disabled" | Model property name for disabled
labelProperty | String | Optional | "label" | Model property name for label

### Model Properties

Model Property | Type | Required | Default | Description
--- | --- | --- | --- | ---
buttonLabel | String | Optional | null | DEPRECATED Button's label
buttonClass | String | Optional | primary | Model property that has the CSS class name of this button. Legal values are: "primary", "secondary", "affirmative", and "negative".
disabled | Boolean | Optional | FALSE | If true, button is inactive
label | String | Optional | null | Button's label

### Methods

To invoke a method on a widget, use the scene controller's `get` method for the desired widget, and append `mojo` followed by the method.

Example:

>     this.controller.get('myWidget').mojo.getValue()

Method | Arguments | Description
--- | --- | ---
activate | None | For an activity button, start the spinner
deactivate | None | For an activity button, stop the spinner