Implements a HTML button element, with support for all Bootstrap button CSS styles as well as advanced functionality such as button states.

Basic Usage

{{#bs-button type="primary" icon="glyphicon glyphicon-download"}}
Downloads
{{/bs-button}}

Actions

Set the action property of the component to send an action to your controller. The following parameters will be sent:

• value: the button's value, see the value property
• event: the browsers event object
• callback: a function that may be called from the action handler to supply a Promise to the button component for automatic state handling

{{#bs-button type="primary" icon="glyphicon glyphicon-download" action="download"}}
Download
{{/bs-button}}

States

Use the textState property to change the label of the button. You can bind it to a controller property to set a "loading" state for example. The label of the button will be taken from the <state>Text property.

{{bs-button type="primary" icon="glyphicon glyphicon-download" textState=buttonState defaultText="Download" loadingText="Loading..." action="download"}}

App.ApplicationController = Ember.Controller.extend({
  buttonState: "default"
  actions: {
    download: function() {
      this.set("buttonState", "loading");
    }
  }
});

Promise support for automatic state change

When returning a Promise for any asynchronous operation from the click closure action the button will manage its textState property automatically, changing its value according to the state of the promise: "default" > "pending" > "resolved"/"rejected"

{{bs-button type="primary" icon="glyphicon glyphicon-download" defaultText="Download" pendingText="Loading..." resolvedText="Completed!" rejectedText="Oups!?" action=(action "download")}}

// controller.js
export default Ember.Controller.extend({
  actions: {
    download(actionParam, evt) {
      return new Ember.RSVP.Promise(...);
    }
  }
});