How to apply css style to actionBttn from shinywigets in shiny

Question

I have an example shiny app as below. In order to the actionButton with selectInput, I need to add style='margin-top:25px'. Shinywidgets package has actionBttn widgets with some built-in style. For example, I like the one with style='gradient'. But I wonder how I can use css style to add margin on the top to align the actionBttn with other element?

library(shiny)
library(shinydashboard)
library(shinyWidgets)


ui <- dashboardPage(
    dashboardHeader(title = "example"),
    dashboardSidebar(),
    dashboardBody(
        box(width=12,

            column(width = 3, dateRangeInput("dateRange", "Date Range",
                                             start  = "2017-01-01",
                                             end    =  Sys.Date(),
                                             min    = "2001-01-01",
                                             max    = Sys.Date(),
                                             format = "mm/dd/yy",
                                             separator = " - ") ),

            column(width=3, selectizeInput(inputId = 'var', 
                                           label='Select variable',
                                           choices = c('cut', 'color'), 
                                           multiple=FALSE,
                                           options = list(
                                               maxItems = 1,
                                               placeholder = '',
                                               onInitialize = I("function() { this.setValue(''); }"))) ),

            column(width=1,  offset =2, actionButton('Apply', 'Apply', style='margin-top:25px') ),

            column(width=3,  actionBttn(
                inputId = 'clear',
                label = "Clear", 
                style = "gradient",
                color = "danger" ) )

        )
    )
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

Answer 1

Hard to say with out your .css but You can find a sample in here

Answer 2

To add a style to an existing element created by a package, sometimes you have to wrap that element. Here's three approaches:

1. Wrap the element itself in a div with the style you want. May not work for all CSS elements.

2. Write your own custom function using the source from your desired element. Here I used the source from https://github.com/dreamRs/shinyWidgets/blob/ac8134e944f91fdcc4490ace6d839c46e7df02ff/R/actionBttn.R#L63

3. Add in some external CSS that targets only that element. This is my least favored approach because it moves the logic away from where it's actually being applied, and you have to keep track of it for each element you want to modify.

library(shiny)
library(shinyWidgets)


# new function for approach #2
actionBttn_with_style <- function(inputId, label = NULL, icon = NULL, style = "unite",
                       color = "default", size = "md", block = FALSE,
                       no_outline = TRUE, my_additional_style = "") {
  value <- shiny::restoreInput(id = inputId, default = NULL)
  style <- match.arg(
    arg = style,
    choices = c("simple", "bordered", "minimal", "stretch", "jelly",
                "gradient", "fill", "material-circle", "material-flat",
                "pill", "float", "unite")
  )
  color <- match.arg(
    arg = color,
    choices = c("default", "primary", "warning", "danger", "success", "royal")
  )
  size <- match.arg(arg = size, choices = c("xs", "sm", "md", "lg"))

  tagBttn <- htmltools::tags$button(
    id = inputId, type = "button", class = "action-button bttn", `data-val` = value,
    class = paste0("bttn-", style), 
    class = paste0("bttn-", size),
    class = paste0("bttn-", color), list(icon, label),
    class = if (block) "bttn-block",
    class = if (no_outline) "bttn-no-outline",
    style = my_additional_style
  )
  shinyWidgets:::attachShinyWidgetsDep(tagBttn, "bttn")
}

After you make your custom button function, you can use it just like actionBttn inside your ui.

ui <- dashboardPage(
  dashboardHeader(
    title = "example"
    ),
  dashboardSidebar(),
  dashboardBody(

    # for approach #3, but this is far away from the button in the code
    htmltools::tags$head(
      htmltools::tags$style('button#clear_ext_css { margin-top:25px }')
    ),

    box(
      width = 12,

      column(
        width = 2,
        dateRangeInput(
          "dateRange",
          "Date Range",
          start  = "2017-01-01",
          end    =  Sys.Date(),
          min    = "2001-01-01",
          max    = Sys.Date(),
          format = "mm/dd/yy",
          separator = " - "
        )
      ),

      column(
        width = 1,
        actionButton('Apply', 'Apply', style = 'margin-top:25px')
      ),

      column(
        width = 3,
        # approach #1, just wrapping it in a styled div
        div(
          actionBttn(
            inputId = 'clear_div',
            label = "Clear with div",
            style = "gradient",
            color = "danger"
          ),
          style = 'margin-top:25px'
        )
      ),
      column(
        width = 3,
        # approach #2, custom function from above
        actionBttn_with_style(
          inputId = 'clear_fn',
          label = "Clear with custom function",
          style = "gradient",
          color = "danger",
          my_additional_style = 'margin-top:25px'
        )
      ),
      column(
        width = 3,
        # approach #3, but you don't see any custom logic here
        actionBttn(
          inputId = 'clear_ext_css',
          label = "Clear with external CSS",
          style = "gradient",
          color = "danger"
        )
      )


    )
  )
)

server <- function(input, output, session) {

}

shinyApp(ui, server)