Change the color of action button in shiny

Question

I am trying to change the color of the action button from gray to orange.

actionButton("run","Run Analysis")

(This is in server.R.) Is it possible to change its color?

you could use http://rstudio.github.io/shinythemes/ or possibly add tags$head() (see http://shiny.rstudio.com/articles/tag-glossary.html) in your ui.R file — MLavoie, Nov 10 '15 at 00:55

score 117 · Answer 1 · edited Mar 02 '22 at 14:25

117

Below, I've made your action button look like a submit button (also adding a font-awesome icon):

actionButton("run", "Run Analysis", icon("paper-plane"), 
    style="color: #fff; background-color: #337ab7; border-color: #2e6da4")

edited Mar 02 '22 at 14:25

stragu

1,051
9
15

answered Mar 08 '16 at 15:12

Megatron

15,909
12
89
97

2

May be you know is there way to add style to `:hover` in this way? – Batanichek Sep 20 '16 at 06:53
1

How come this style argument does not work for all other inputs as well, does anyway know? – Tonio Liebrand Feb 01 '17 at 21:58
@BigDataScientist it often does actually, but much depends on the actual constructor function. And you need to use the correct labels inside. – Joris Meys Jul 12 '17 at 18:27
@Batanichek In case you never found an answer: see my comment under the accepted answer by Rmlu. – Stefan Jelkovich Oct 19 '21 at 06:33

score 23 · Accepted Answer · edited Jan 13 '20 at 14:42

23

As @MLavoie mentioned, you can embed CSS in your shiny app using tags$head. Try this:

library(shiny)

ui <- shinyUI(fluidPage(
  tags$head(
    tags$style(HTML('#run{background-color:orange}'))
  ),
  actionButton("run","Run Analysis")
))
server <- shinyServer(function(input, output) {

})
shinyApp(ui, server)

If you're unfamiliar to CSS, w3schools has really good and easy tutorials.

edited Jan 13 '20 at 14:42

Waldir Leoncio

10,853
19
77
107

answered Nov 10 '15 at 08:45

RmIu

4,357
1
21
24

2

To add a hover-style, use something like `tags$style(HTML('#run{background-color:orange} #run:hover{background-color:red}`)). – Stefan Jelkovich Oct 19 '21 at 06:30

score 20 · Answer 3 · answered Jan 07 '20 at 13:56

20

You can use boostrap colors in the class attribute:

actionButton("run","Run Analysis", class = "btn-warning")

These are basic colors only but really usefull for graphic standards.

answered Jan 07 '20 at 13:56

Clemsang

5,053
3
23
41

11

https://getbootstrap.com/docs/4.0/components/buttons/ for more options! – tjebo Jun 13 '20 at 15:30

Change the color of action button in shiny

3 Answers3

Linked