# Steps for creating custom small-actions to use in plugin?

**URL:** https://meta.discourse.org/t/steps-for-creating-custom-small-actions-to-use-in-plugin/144599
**Category:** Development
**Created:** [March 17, 2020, 3:17pm UTC](https://meta.discourse.org/t/steps-for-creating-custom-small-actions-to-use-in-plugin/144599 "2020-03-17T15:17:49Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Hooksmith](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hooksmith/32/142826_2.png) [@Hooksmith](https://meta.discourse.org/u/Hooksmith)
#### Post date: [March 17, 2020, 3:17pm UTC](https://meta.discourse.org/t/steps-for-creating-custom-small-actions-to-use-in-plugin/144599/1 "2020-03-17T15:17:50Z")

</div>

I’m working on some domain-specific plugins for our forum and we would like to create custom small actions similar to these:

 ![image](https://global.discourse-cdn.com/meta/original/3X/3/d/3d8d6d987dede504eecdb747eb33ab8968791684.png)

In particular I just need to be able to put notices like these on the topic but being able to customize the icon and the text.

Can anyone walk me through the constructs/modules/templates/etc I would need to hook into to accomplish this on the back-end and front-end, or could you point me to an existing plugin that currently implements this?

Thank you!

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [March 17, 2020, 3:35pm UTC](https://meta.discourse.org/t/steps-for-creating-custom-small-actions-to-use-in-plugin/144599/2 "2020-03-17T15:35:27Z")

</div>

discourse-assign is probably the best example of this:

> <https://github.com/discourse/discourse-assign/blob/main/lib/topic_assigner.rb#L207-L217>

And then some stuff to add the icon / content

[https://github.com/discourse/discourse-assign/blob/master/assets/javascripts/discourse-assign/initializers/extend-for-assigns.js.es6#L158-L169](https://github.com/discourse/discourse-assign/blob/master/assets/javascripts/discourse-assign/initializers/extend-for-assigns.js.es6#L158-L169)

---

<div class="post-metadata">

### Author: ![Hooksmith](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hooksmith/32/142826_2.png) [@Hooksmith](https://meta.discourse.org/u/Hooksmith)
#### Post date: [March 18, 2020, 5:05pm UTC](https://meta.discourse.org/t/steps-for-creating-custom-small-actions-to-use-in-plugin/144599/3 "2020-03-18T17:05:10Z")

</div>

Thanks, this helped out a lot.

What would be the best way to go about making the small action display richer text?

Current:  
 ![image](https://global.discourse-cdn.com/meta/original/3X/9/6/96947f472e0e2c414d28cef93a981bd83f313c82.png)

What I want: (I achieved this by manually inserting the `cooked` class into the div with class `small-action-desc`)

![image](https://global.discourse-cdn.com/meta/original/3X/3/a/3a8b0334f19b131ef9056c09096987860dfdb4cd.png)

I skimmed through the source code about post transformers but could not find anything related to this

* * *

**EDIT:** ended up just adding this as .scss

```scss
.custom-message {
    ins {
        background-color: dark-light-choose(
            $success-low,
            scale-color($success, $lightness: -60%)
        );
    }
    del {
        background-color: dark-light-choose(
            $danger-low,
            scale-color($danger, $lightness: -60%)
        );
    }
}

```