Simple Action Button in Ember 2.0

action-button.hbs

{{yield}}

action-button.js

import Ember from 'ember';

/**
 * Button component that can be turned on and off by adjusting it's "disabled"
 * attribute.
 *
 * @type {Ember.Component}
 */
export default Ember.Component.extend({

  /**
   * Makes the component a button html element.
   */
  tagName: 'button',

  /**
   * Gives the button nice Material effects.
   */
  classNames: ['waves-effect', 'waves-light', 'btn'],

  /**
   * Allows you to toggle the button with the "disabled" componenet attribute.
   */
  classNameBindings: ['disabled'],

  /**
   * Creates html element attributes for any specified component attributes.
   */
  attributeBindings: ['type'],

  /**
   * Whether or not the button is disabled.
   *
   * @property disabled
   * @type {Boolean}
   */
  disabled: false,

  /**
   * Set this to "submit" if this is form submission input.
   *
   * @property type
   * @type {String}
   */
  type: null,

  /**
   * An action hook for click actions.
   *
   * @property clickAction
   * @type {Ember.Action}
   */
  clickAction: null,

  /**
   * Fire the specified "clickAction" attribute if the button is clicked
   * and it is not disabled.
   *
   * @property click
   * @type {Ember.Action}
   */
  click() {
    Ember.assert(
      'button should have a "clickAction" attribute',
      typeof this.attrs.clickAction !== undefined
    );

    if (!this.attrs.disabled) {
      this.attrs.clickAction();
    }
  }
});

sample.hbs

{{#action-button disabled=disabledAttr saveAction=(action "ctrlSaveAction")}}Save{{/action-button}}

sample.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    clickAction() {
      // Do something
    }
  }
});