Tracked Button example

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  click() {
    console.log('click event propagated');
  },
  
  actions: {
    foo(...args) {
      console.log('action called', args);
    }
  }
});

components.tracked-button.js

import Ember from 'ember';

export default Ember.Component.extend({
  tracking: Ember.inject.service(),
  attributeBindings: ['disabled'],
  tagName: 'button',
  
  click(event) {
    this.get('tracking').track(this);
    this.sendAction('action');
    
    if (this.get('stopPropagation')) {
      event.stopPropagation();
    }
    
    if (this.get('preventDefault')) {
      event.preventDefault();
    }
  }
});

services.tracking.js

import Ember from 'ember';

export default Ember.Service.extend({
  track(obj) {
    console.log("TRACK", obj.getProperties('trackingPath', 'trackingOptions'));
  }
});

styles.app.css

/* copied from generated application.css */
*:focus {
  outline: none;
}

button,
.button {
  display: inline-block;
  height: 32px;
  padding: 0 1em;
  border: 1px solid #c2c7cc;
  border-radius: 3px;
  background-color: #fafafa;
  font-size: 14px;
  color: #85898c;
  line-height: 30px;
  font-weight: 500;
  text-align: center;
  -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

button:hover, button.button--is-hovered, .button-window:hover button.button-window__button,
.button:hover,
.button.button--is-hovered,
.button-window:hover .button.button-window__button {
  background-color: white;
  -webkit-transition-duration: 0.05s;
  transition-duration: 0.05s;
  color: #85898c;
}

button:focus, button.button--is-focused,
.button:focus,
.button.button--is-focused {
  background-color: white;
  border-color: #94cae5;
  color: #94cae5;
}

button:active, button.button--is-active, .button-window:active button.button-window__button,
.button:active,
.button.button--is-active,
.button-window:active .button.button-window__button, button:active:hover, button.button--is-active:hover,
.button:active:hover,
.button.button--is-active:hover {
  background-color: #fafafa;
}

button:focus:disabled, button.button--is-disabled:focus, button.button--is-focused:disabled, button.button--is-focused.button--is-disabled,
.button:focus:disabled,
.button.button--is-disabled:focus,
.button.button--is-focused:disabled,
.button.button--is-focused.button--is-disabled, button:disabled, button.button--is-disabled,
.button:disabled,
.button.button--is-disabled {
  background-color: #fafafa;
  opacity: 0.5;
  cursor: default;
}

templates.application.hbs

{{my-component}}

templates.components.my-component.hbs

{{tracked-button label="Basic with param"
                 trackingPath="foo.bar"
                 trackingOptions="metadata"
                 action=(action 'foo' 42)
                 stopPropagation=true}}
                 
{{#tracked-button trackingPath="foo.bar"
                  trackingOptions="metadata"
                  action=(action 'foo' 42)}}
  Label inside block
{{/tracked-button}}

{{tracked-button label="Old style actions"
								 action="foo"}}

{{tracked-button label="I'm disabled"
                 disabled=true}}

templates.components.tracked-button.hbs

{{#if hasBlock}}
	{{yield}}
{{else}}
	{{label}}
{{/if}}

twiddle.json

{
  "version": "0.10.4",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.1.2",
    "ember-data": "2.1.0",
    "ember-template-compiler": "2.1.2"
  },
  "addons": {}
}