# How to make colour picker appear with button?

**URL:** <https://discourse.nodered.org/t/how-to-make-colour-picker-appear-with-button/93043>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [10 November 2024 21:45 UTC](https://discourse.nodered.org/t/how-to-make-colour-picker-appear-with-button/93043 "2024-11-10T21:45:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [10 November 2024 21:45 UTC](https://discourse.nodered.org/t/how-to-make-colour-picker-appear-with-button/93043/1 "2024-11-10T21:45:30Z")

</div>

Hi, this may be a silly question but it's something I have struggled to do.

I currently have this kind of thing in Dashboard 2.0:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/4/540b6467661ba34896c73e9fe6944dcb6792978e.png)

As you can see it conditionally shows the colorpicker depending on whether it's a colour changing light. That works fine for me, and also I'm able to change the light colour using the colorpicker.

But now I'd like to have it so that the colorpicker appears in some dialog / overly when I press a button, e.g. it might look like this:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/2/9254746e82089a422246f75ed6212c3a907b5042.png)

Maybe this is just basic stuff using conditional CSS but can you suggest a way that's builtin to Vue so I can achieve that?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 November 2024 22:53 UTC](https://discourse.nodered.org/t/how-to-make-colour-picker-appear-with-button/93043/2 "2024-11-10T22:53:15Z")

</div>

You can do dialogs now in dashboard 2.

> [@Dashboard Updates: Dialogs, Customisable Application Icon, Histograms + More](https://discourse.nodered.org/t/dashboard-updates-dialogs-customisable-application-icon-histograms-more/92374):
>
> Hi All, just wanted to make you aware of the new update for Dashboard. In particular, I think the new Group "type" property will be really useful/popular, as it makes it very easy to render content into a Dialog/Modal. Full Article: [Dialogs, Customizable Icons and Histograms Now Available in FlowFuse Dashboard • FlowFuse](https://flowfuse.com/blog/2024/10/dashboard-new-group-type-app-icon-and-charts/) Dialog Docs: [Config: UI Group ui-group | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/config/ui-group.html#type)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 December 2024 22:53 UTC](https://discourse.nodered.org/t/how-to-make-colour-picker-appear-with-button/93043/3 "2024-12-10T22:53:19Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.