# Custom Components -- add button or text at any plugin outlet

**URL:** https://meta.discourse.org/t/custom-components-add-button-or-text-at-any-plugin-outlet/349629
**Category:** Theme component
**Created:** [January 29, 2025, 7:52pm UTC](https://meta.discourse.org/t/custom-components-add-button-or-text-at-any-plugin-outlet/349629 "2025-01-29T19:52:10Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [January 29, 2025, 7:52pm UTC](https://meta.discourse.org/t/custom-components-add-button-or-text-at-any-plugin-outlet/349629/1 "2025-01-29T19:52:10Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **Summary** | Add button or text anywhere |
| 🛠 | **Repository** | [https://github.com/literatecomputing/discourse-custom-components](https://github.com/literatecomputing/discourse-custom-components) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

Add a link button or arbitrary text at any plugin outlet. (Ignore the watermarks in the images–I took these screenshots on a staging/test site.)

To see where the plugin outlets are, use [Introducing Discourse developer toolbar](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215) to find them. If you don’t know what a plugin outlet is, you can have a look at [Using Plugin Outlet Connectors from a Theme or Plugin](https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727), but this component allows you, with some restrictions, stick text in any plugin outlet without doing programming or really understanding what a plugin outlet is.

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/c/4/1c40fec47bb1599224c9bc234c686b641db260b8.png)

 ![The image shows a settings interface for custom buttons, including fields for button text, title, URL, class, icon, and groups, with an example button named "Custom Component Demo Button!". (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/f/6/9/f690cff41846bf4869061a0aa8b89033eec6da24.png)

 ![This image shows a theme settings interface for editing custom text block components in a forum design, with options for displaying specific text elements, configuring block outlets, applying class styles, and controlling display based on user groups. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/3/5/2/35224da267b7ac857ca3ad23c3383e8a39c27c1c.png)

I started developing this plugin for someone who wanted to display a “click this button to subscribe so that you can send PMs” button on user profiles and user cards. They wanted the button to display if the user couldn’t send PMs. Because I’m not always as clever as I’d like to think, I wrote the component using groups to determine whether the button was displayed. One problem with this approach was that staff members weren’t in the subscriber group, so they’d get the “you gotta subscribe” button even though they could send PMs. Also, the group was hidden, so it was impossible to use it in a theme component anyway. I [re-wrote that theme component](https://github.com/literatecomputing/subscribe-to-message) to use `currentUser.can_send_private_messages` to determine whether to display the button.

### Who is this for?

If you want to put a button with a link in it, or some arbitrary text that is displayed or hidden for certain groups, this will let you insert them at any plugin outlet. You want to add a “You outa subscribe” link button between every message except for those who aren’t members? This will do it. You want to stick some arbitrary HTML at a plugin outlet, just to see what it’ll look like? This will do that.

### How it helps developers

This theme has some simple examples of how to:

- use the [Objects type for theme setting](https://meta.discourse.org/t/objects-type-for-theme-setting/305009)
- use `api.renderInOutlet` (as described [here](https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727/34) to stick a Glimmer component at an outlet controlled by a setting rather than creating a file in the `connectors` directory
- Write a [simple Glimmer component](https://github.com/literatecomputing/discourse-custom-components/blob/main/javascripts/discourse/components/button-link.gjs) that accesses `currentUser`
- [Wrap a component in another (inline) template](https://github.com/literatecomputing/discourse-custom-components/blob/main/javascripts/discourse/api-initializers/custom-components.gjs#L9-L11) to be able to pass data to it
- Display arbitrary HTML from a theme setting free of the constraints of Markdown–Sure, maybe

> [@Add settings to your Discourse theme](https://meta.discourse.org/t/add-settings-to-your-discourse-theme/82557/1):
>
> You can use the Ember’s `html-safe` helper here and it will render the HTML instead of the text.

but if you’re trying to do it inside of a `<template>` inside of a `.gjs` file, it works a little differently (like `{{htmlSafe component.text}}`)

---

_[View the full topic](https://meta.discourse.org/t/custom-components-add-button-or-text-at-any-plugin-outlet/349629)._