Overwrite the color of a shinyWidgets actionBttn


How do I overwrite the color of a shinyWidgets actionBttn in a custom css file that I invite with the theme function?

(Or how do I change the primary and default colors of the default theme in shiny in general?)

Thanks in advance!

Not sure if this works for actionBttn as well, but the normal actionButton can actually nicely configured using the "style" feature.

> actionButton("ButtonID", "Button Label",
>                       style="color: #fff; background-color: #e95420; border-color: #c34113;
>                                border-radius: 10px; 
>                                border-width: 2px")
1 Like

Thanks for the answer.
The actionBttn override the CSS style if I set it the way you suggest. The package uses a special CSS library as far as I know and the function calls for preset style and color.
The color options contain primary and default which I assume the primary and default colors of my theme. This is why I thought that by changing the default color, the color of the button would change as well.

You are right, it's complicated, but I think the preset colours are used from the definition in the theme or in the css.
When you use another theme (e.g. from shinythemes) the colours can be different. Most often primary is blue, however but there are other possibilities as well.
I just checked my app, as I have include also some shinyWidgets elements, but I am just lucky that one of the colours (primary for me) matches the colour I want to have.
So if you find a solution - let me know!
I know that you can additionally edit the appearence of the sliders,

and then match the regular action buttons as described above.

And when you use your own css maybe this can help?


1 Like

Thanks for the detailed response and the link Matthias!

At the end I compiled a custom bootstrap with this app: https://getbootstrap.com/docs/3.4/customize/

It works!

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