Why my button component submits the form it is in? [on hold]

If I put a button inside a form and click on it, only the button-click event is triggered.

But if I build a button component "my-button", replace the button with "my-button" and click on it again, it triggers the button click event but also submits the form.

Is it supposed to behave that way? How do I make my component not submit the form?

App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({
  actions: {
    clicked: function() {
      alert('click');
    },
    submitted: function() {
      alert('submit');
    }
  }
});

App.MyButtonComponent = Ember.Component.extend({
  tagName: "button",
  click: function() {
    this.sendAction();
  }
});

<script src="http://ift.tt/1mWWrGH"></script><script src="http://ift.tt/1DQcv7U"></script><script src="http://ift.tt/1NZD2PR"></script>

<script type="text/x-handlebars">
    <form {{action "submitted" on="submit" }}>
        {{my-button action="clicked"}}
        <button {{action "clicked"}}>button</button>
    </form>
</script>

<script type="text/x-handlebars" data-template-name="components/my-button">
    my-button
</script>

I also created a JS Bin. Any click event logs “click” to the console and a form submit logs “submit” into the browser console.