Shinydashboard grayed out downloadButton?

Question

How can I fix the download button on this simple example?

library(shiny)
library(shinydashboard)
library(shinyjs)
header <- dashboardHeader()

sidebar <- dashboardSidebar(shinyjs::useShinyjs(),  
                            actionButton("start_proc", "Click to make download button appear"),
                            p(),
                            downloadButton('data_file', 'Download'))

body <- dashboardBody()

ui <- dashboardPage(header, sidebar, body)


server <- function(input, output) {

  observe({
    if (input$start_proc > 0) {
      Sys.sleep(1)
      # enable the download button
      shinyjs::show("data_file")
    }
  })

  output$data_file <- downloadHandler(
    filename = function() {
      paste('data-', Sys.Date(), '.csv', sep='')
    },
    content = function(file) {
      write.csv(data.frame(x=runif(5), y=rnorm(5)), file)
    }
  )
  # disable the downdload button on page load
  shinyjs::hide("data_file")
}

shinyApp(ui, server)

Answer 1

It looks like ANY download button you place inside the sidebar looks like that (nothing to do with the fact it was using hide/show). If you simply move the button to the body instead of the sidebar, it looks normal again, and if you add more buttons to the sidebar they all are grayed out as well. So this tells us that it's probably something about the CSS.

If you look at the CSS of the button, you'll see the rule

.skin-blue .sidebar a {
    color: #b8c7ce;
}

So it looks like someone (either shiny or bootstrap, I'm not sure who is responsible for this CSS file) it purposely making links (and a download button is really just a link that's styled differently) gray text. So you can fix this by adding your own CSS like

tags$style(".skin-blue .sidebar a { color: #444; }")