Shiny: Make buttons more customizable by allowing more bootstrap colors

Created on 23 Apr 2017  路  4Comments  路  Source: rstudio/shiny

https://getbootstrap.com/css/#buttons
https://v4-alpha.getbootstrap.com/components/buttons/#examples

allows to have primary, secondary etc.

It would be nice to have it e.g. here as well. https://github.com/rstudio/shiny/blob/master/R/bootstrap.R#L1458

I.e. I would like to change default to danger

Most helpful comment

@dmpe, Given the way that CSS works, if you assign two different classes that each specify a different color, the last one wins out. So, functionally, you can already do what you want in Shiny. I realize that it may look clunky to have two color classes, but it's valid CSS.

This applies to all Shiny buttons, as demoed below:

library(shiny)
ui <- fluidPage(
  h3("Action Buttons"),
  actionButton("default", "Default"),
  actionButton("primary", "Primary", class = "btn-primary"),
  actionButton("secondary", "Secondary", class = "btn-secondary"),
  actionButton("success", "Success", class = "btn-success"),
  actionButton("info", "Info", class = "btn-info"),
  actionButton("warning", "Warning", class = "btn-warning"),
  actionButton("danger", "Danger", class = "btn-danger"),
  actionButton("link", "Link", class = "btn-link"),

  h3("Download Buttons"),
  downloadButton("default", "Default"),
  downloadButton("primary", "Primary", class = "btn-primary"),
  downloadButton("secondary", "Secondary", class = "btn-secondary"),
  downloadButton("success", "Success", class = "btn-success"),
  downloadButton("info", "Info", class = "btn-info"),
  downloadButton("warning", "Warning", class = "btn-warning"),
  downloadButton("danger", "Danger", class = "btn-danger"),
  downloadButton("link", "Link", class = "btn-link"),

  h3("Bookmark Buttons"),
  bookmarkButton("Default"),
  bookmarkButton("Primary", class = "btn-primary"),
  bookmarkButton("Secondary", class = "btn-secondary"),
  bookmarkButton("Success", class = "btn-success"),
  bookmarkButton("Info", class = "btn-info"),
  bookmarkButton("Warning", class = "btn-warning"),
  bookmarkButton("Danger", class = "btn-danger"),
  bookmarkButton("Link", class = "btn-link")
)
server <- function(input, output, session) {}
shinyApp(ui, server)

All 4 comments

@dmpe, Given the way that CSS works, if you assign two different classes that each specify a different color, the last one wins out. So, functionally, you can already do what you want in Shiny. I realize that it may look clunky to have two color classes, but it's valid CSS.

This applies to all Shiny buttons, as demoed below:

library(shiny)
ui <- fluidPage(
  h3("Action Buttons"),
  actionButton("default", "Default"),
  actionButton("primary", "Primary", class = "btn-primary"),
  actionButton("secondary", "Secondary", class = "btn-secondary"),
  actionButton("success", "Success", class = "btn-success"),
  actionButton("info", "Info", class = "btn-info"),
  actionButton("warning", "Warning", class = "btn-warning"),
  actionButton("danger", "Danger", class = "btn-danger"),
  actionButton("link", "Link", class = "btn-link"),

  h3("Download Buttons"),
  downloadButton("default", "Default"),
  downloadButton("primary", "Primary", class = "btn-primary"),
  downloadButton("secondary", "Secondary", class = "btn-secondary"),
  downloadButton("success", "Success", class = "btn-success"),
  downloadButton("info", "Info", class = "btn-info"),
  downloadButton("warning", "Warning", class = "btn-warning"),
  downloadButton("danger", "Danger", class = "btn-danger"),
  downloadButton("link", "Link", class = "btn-link"),

  h3("Bookmark Buttons"),
  bookmarkButton("Default"),
  bookmarkButton("Primary", class = "btn-primary"),
  bookmarkButton("Secondary", class = "btn-secondary"),
  bookmarkButton("Success", class = "btn-success"),
  bookmarkButton("Info", class = "btn-info"),
  bookmarkButton("Warning", class = "btn-warning"),
  bookmarkButton("Danger", class = "btn-danger"),
  bookmarkButton("Link", class = "btn-link")
)
server <- function(input, output, session) {}
shinyApp(ui, server)

maybe for bootstrap v4 :) Because the fix is very simple - just add a new parameter :)

No, we're unlikely to add a new a parameter, since the code above is sufficient and clear. Adding a new parameter that replicates existing functionality is bad practice.

Closing because a workaround was provided, but please don't hesitate to comment further or create a new issue.

Was this page helpful?
0 / 5 - 0 ratings