R shiny radiogroup Button change color

Question

I am using the library shinythemes https://rstudio.github.io/shinythemes/ but I would like to change the color of radiogroup buttons. How can I change the color?

               radioGroupButtons(
                 status = "primary ",
                 inputId = "indicadores_radiogroup",
                 choices = c("Casos" = "Confirmados", "Muertes"= "Muertes"),
                 
               ),

Thanks

Samuel Calderon · Answer 1 · 2021-03-04T19:42:30.823

2

It seems you are using the shinyWidgets package. You can set status = "danger" for a red color, or status = "success" for a green color. Check the ' radio Buttons' panel in http://shinyapps.dreamrs.fr/shinyWidgets/

radioGroupButtons(
   inputId = "Id064",
   label = "Label",
   choices = c("A", 
    "B", "C", "D"),
   status = "danger"
)

The status parameter adds a class to your button. The example gives your button the class btn-danger. Check the css associated.

.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

You can use an arbitrary string to add a custom class, e.g. : with status = 'myClass', buttons will have class btn-myClass. Then you will need to specify the css.

.btn-myClass {
    background-color: #ff4500;
}

edited Mar 04 '21 at 19:42

answered Mar 04 '21 at 19:24

Samuel Calderon

641
3
13

Yes, I am using shiny widgets but what If I want a specific color "#FF4500", like this for example – coding Mar 04 '21 at 19:32
check the edit. you can use `status` to generate a custom class for your button – Samuel Calderon Mar 04 '21 at 19:43

score 2 · Answer 2 · answered Mar 04 '21 at 19:34

2

For your own specific color, you can try the following:

ui = fluidPage(
    radioGroupButtons(
      #status = "primary ",  ##  you can change status value to change to select few colors
      inputId = "indicadores_radiogroup",
      checkIcon = list(yes = icon("check")),
      choiceValues = c("Confirmados", "Muertes"), 
      choiceNames = c("Casos", "Muertes"),
      justified = TRUE, width = "300px"
    ),
    tags$script("$(\"input:radio[name='indicadores_radiogroup'][value='Confirmados']\").parent().css('background-color', '#FF4500');"),
    tags$script("$(\"input:radio[name='indicadores_radiogroup'][value='Muertes']\").parent().css('background-color', '#7EF373');"),

  )
  server = function(...) {}

  shinyApp(ui, server)

answered Mar 04 '21 at 19:34

YBS

19,324
2
9
27

This works to change the colors of the individual buttons, but do you know how to then make it so that they darken slightly when selected? This is what it does by default, but it doesn't do it when you give custom values like is done here – Jamie Jun 15 '22 at 03:39
Define a custom class as noted in the other answer. – YBS Jun 15 '22 at 10:48
that is not helpful. I have defined a custom class but that doesn't answer the question of how to make it so the classes refer to when the option is selected vs. not selected – Jamie Jun 17 '22 at 17:57

R shiny radiogroup Button change color

2 Answers2

Linked