Components.Button public

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

Basic Usage

<BsButton @type="primary" @icon="glyphicon glyphicon-download">
  Downloads
</BsButton>

Actions

Use the onClick property of the component to send an action to your controller. It will receive the button's value (see the value property) as an argument.

<BsButton @type="primary" @icon="glyphicon glyphicon-download" @onClick=(action "download")>
  Downloads
</BsButton>

Promise support for automatic state change

When returning a Promise for any asynchronous operation from the onClick closure action the button will manage an internal state ("default" > "pending" > "fulfilled"/"rejected") automatically.

The button is disabled by default if it's in pending state. You could override this behavior by passing the disabled HTML attribute or by setting @preventConcurrency to false.

<BsButton
  disabled={{false}}
/>

<BsButton
  @preventConcurrency={{false}}
/>

The label could be changed automatically according to the state of the promise with @defaultText, @pendingText, @fulfilledText and @rejectedText arguments:

<BsButton
  @type="primary"
  @icon="glyphicon glyphicon-download"
  @defaultText="Download"
  @pendingText="Loading..."
  @fulfilledText="Completed!"
  @rejectedText="Oups!?"
  @onClick={{this.download}}
/>

// controller.js
import { Controller } from '@ember/controller';
import { action } from '@ember/object';

export default class MyController extends Controller {
  @action
  download(value) {
    return new Promise(...);
  }
});

For further customization isPending, isFulfilled, isRejected and isSettled properties are yielded:

<BsButton @onClick=(action "download") as |button|>
  Download
  {{#if button.isPending}}
    <span class="loading-spinner"></span>
  {{/if}}
</BsButton>

You can reset the state represented by these properties and used for button's text by setting reset property to true.

Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.