# How to add action for button in plugin

**URL:** https://meta.discourse.org/t/how-to-add-action-for-button-in-plugin/153383
**Category:** Development
**Created:** [31 במאי,‏ 2020,‏ 1:09pm UTC](https://meta.discourse.org/t/how-to-add-action-for-button-in-plugin/153383 "2020-05-31T13:09:28Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![wyudong](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wyudong/32/180747_2.png) [@wyudong](https://meta.discourse.org/u/wyudong)
#### Post date: [31 במאי,‏ 2020,‏ 1:09pm UTC](https://meta.discourse.org/t/how-to-add-action-for-button-in-plugin/153383/1 "2020-05-31T13:09:29Z")

</div>

I want to make a plugin to show a button and do some action. The button can already be displayed at the desired place, but I don’t know how to create a custom action for it. The file structure is like followings:

```plaintext
plugins/discourse-my-plugin
├── assets
│ ├── javascripts
│ │ └── discourse
│ │ ├── initializers
│ │ │ └── my-plugin.js.es6
│ │ └── templates
│ │ └── connectors
│ │ └── user-messages-nav
│ │ ├── actions.js.es6
│ │ └── button.hbs
├── config
└── plugin.rb

```

**initializers/my-plugin.js.es6**

```js
import { withPluginApi } from "discourse/lib/plugin-api";

function initializeButton(api) {
  api.decoratePluginOutlet('user-messages-nav', (elem, args) => {
    ...
  });
}
export default {
  name: "my-button",
  initialize() {
    withPluginApi("0.8.31", initializeButton);
  }
};

```

**button.hbs**

```plaintext
{{d-button class="btn-primary" action="submitContent" label="submit_content"}}

```

Is it correct to create my custom action like this in **actions.js.es6**? The error is “had no action handler for: submitContent” but how can I fix it?

```js
export default {
  actions: {
    submitContent() {
      ...
    }
  }
};

```

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [31 במאי,‏ 2020,‏ 3:25pm UTC](https://meta.discourse.org/t/how-to-add-action-for-button-in-plugin/153383/2 "2020-05-31T15:25:12Z")

</div>

You were very close 👍

You only need to change the file name. Both the `.hbs` and `js.es6` files in your connector class need to have the same name. So, if you change

`actions.js.es6`

to

`button.js.es6`

it should work. You can read more about connector classes here

> [@Important changes to Plugin Outlets for Ember 2.10](https://meta.discourse.org/t/important-changes-to-plugin-outlets-for-ember-2-10/54136):
>
> Shortly I will be merging a branch of Discourse into master that updates us to the latest stable version of Ember, which is 2.10. This is exciting because we’ve been behind Ember’s stable branch for a while and we’ve finally caught up! It also contains the Glimmer 2 template engine which is quite a bit faster so the application should be more responsive, and it also cuts down on our template file sizes so the app should be quicker to download. However, there is a downside, and that I wasn’t abl…

---

<div class="post-metadata">

### Author: ![wyudong](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wyudong/32/180747_2.png) [@wyudong](https://meta.discourse.org/u/wyudong)
#### Post date: [31 במאי,‏ 2020,‏ 4:25pm UTC](https://meta.discourse.org/t/how-to-add-action-for-button-in-plugin/153383/3 "2020-05-31T16:25:48Z")

</div>

Thanks Joe, it works like a charm!

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [31 במאי,‏ 2020,‏ 7:28pm UTC](https://meta.discourse.org/t/how-to-add-action-for-button-in-plugin/153383/4 "2020-05-31T19:28:24Z")

</div>