Change Color Actionbutton Shiny R

Change the color of action button in shiny

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.

change color actionButton Shiny R

That should be doable in "pure" shiny:
Use renderUI() to create the button and insert conditions to check if the button was clicked already.

I decided to store the information (whether a button was clicked) within a reactiveVariable as you wrote that you plan to trigger the color change "if a button is clicked, or a specific element (i.e. inputslider) changes that is linked to a button". So you could also change the global$clicked from other inputs.

library(shiny)
shinyApp(
ui = fluidPage(
uiOutput("button")
),
server = function(input, output) {
global <- reactiveValues(clicked = FALSE)

observe({
if(length(input$RunFullModel)){
if(input$RunFullModel) global$clicked <- TRUE
}
})

output$button <- renderUI({
if(!is.null(input$RunFullModel) & global$clicked){
actionButton(inputId= "RunFullModel", label =icon("tree-deciduous", lib = "glyphicon"),
style = "color: white;
background-color: #35e51d;
position: relative;
left: 3%;
height: 35px;
width: 35px;
text-align:center;
text-indent: -2px;
border-radius: 6px;
border-width: 2px")
}else{
actionButton(inputId= "RunFullModel", label =icon("tree-deciduous", lib = "glyphicon"))
}

})
}
)

Change color of action button

Just add a css rule for disabled Buttons in you css file

.btn.disabled {
background-color: red;
}

if you don't have any separate css-file you can add it to your UI with a script tag like this

library(shiny)
runApp(shinyApp(
ui = fluidPage(
shinyjs::useShinyjs(),
tags$style(".btn.disabled {
background-color: red;
}"),
actionButton("test", "Test"),
actionButton("submit", "Choose")
),
server = function(input, output, session) {
observeEvent(input$submit, {
shinyjs::disable("test")
})
}
))

When Shiny actionButtons clicked (and unclicked) change color and record clicked value

An option, using radioGroupButtons in the shinyWidgets package:

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
radioGroupButtons(
inputId = "somevalue",
label = "Make a choice: ",
choices = c("Option 1", "Option 2", "Option 3"),
individual = TRUE
),
verbatimTextOutput("value")
)

server <- function(input, output) {
output[["value"]] <- renderPrint({ input[["somevalue"]] })
}

shinyApp(ui, server)

Sample Image

Change button color in Shiny while using navbar

Referring to your third example, the following works if you don't use shinythemes:

actionButton("download1", "Download with style", style = "color: white; background-color:#4682b4")

You can change color according to your choice. style will change button text color and background-color will change button color using HTML HEX code. You can get any HEX code here: http://htmlcolorcodes.com/

Copy the background color from an action button in shiny, which is picked from a ColourPicker

You could set an input value via client-side Javascript, using Shiny.setInputValue and process this value like those provided by UI input elements.
Simple example:

library(shiny)
ui <- shiny::fluidPage(
actionButton('colored_button', 'a green button',
style = 'background-color:#00ff00'
),
actionButton('button_get_color', 'get color'),
textOutput('color_message'),
## inject client-side javascript:
tags$script('
// bind JS code to the getter button:
document.getElementById("button_get_color")
.onclick = function(){
// set input value via JS:
Shiny.setInputValue("color",
// select colored button and get its background color:
document.getElementById("colored_button")
.style.backgroundColor)
}'
)
)

server <- function(input, output) {
observeEvent(input$button_get_color,{
## do stuff, e. g.
output$color_message <- renderPrint(input$color)
})
}

shinyApp(ui, server)

Edit:

  • You can also use the colored button (or any page element) to set the input value: get the element by ID and have it trigger Shiny.setInputValue on click (or other mouse event)
  • more information on communicating via JS here
  • some suggestions on converting RGB to Hex


Related Topics



Leave a reply



Submit