# \[Feedback needed\] My solution for having a generic button with success and failure states

**URL:** <https://discuss.emberjs.com/t/feedback-needed-my-solution-for-having-a-generic-button-with-success-and-failure-states/14030>\
**Category:** Learning Team\
**Created:** [December 16, 2017, 1:55pm UTC](https://discuss.emberjs.com/t/feedback-needed-my-solution-for-having-a-generic-button-with-success-and-failure-states/14030 "2017-12-16T13:55:09Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![bsylvain](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/bsylvain/32/16348_2.png) [@bsylvain](https://discuss.emberjs.com/u/bsylvain)\
**Post date:** [December 16, 2017, 1:55pm UTC](https://discuss.emberjs.com/t/feedback-needed-my-solution-for-having-a-generic-button-with-success-and-failure-states/14030/1 "2017-12-16T13:55:09Z")

</div>

I am still a beginner in Ember and I am currently looking to make a generic button component with multiple states.

I want the button to reflect the “waiting” status of an action, and then to have a feedback for success or failure. this code is working, I post it to have some feedback on ite

I haven’t found any example for this particular use case and this is how I solved it

The button component code :

```nohighlight
    import Ember from 'ember';

    export default Ember.Component.extend({

      inProgress: false,
      isFailure: false,
      actionDone: false,
      actions: {
        onClick() {
          this.set('inProgress',true);
          this.get('theAction')().then(() => {
            this.set('inProgress',false)
          },() => {
            this.set('inProgress',false)
            this.set('isFailure',true)
          });
        }
      }
    });

```

A controller function used in the button :

```nohighlight
    import Ember from 'ember';

    export default Ember.Controller.extend({
      actions:{
        saveLicenceVersion(licenceVersion) {
          return new Ember.RSVP.Promise((resolve, reject) => {
            var file = document.getElementById('file-field').files[0];
            licenceVersion.set('document',file);
            licenceVersion.save().then(() => {
                resolve();
              },() => {
                reject();
              }
            )
          })
        }
      }
    });

```

The booleans from the component are used in the component template to alter the display. With this solution I can easily reuse the component by having my function return promises. I will probably add value to resolve and reject to handle error messages

What do you think about this approach? Is it a good “ember way” of doing it?