Can't custom the `size` argument of `shinyBS::bsButton`

Question

With shinyBS::bsButton() it is possible to have a style = "default" button and a custom size e.g. :

bsButton("but1", style = "default", label = "small button with default style", size = "extra-small")

I have a shiny dashboard and for an unknown reason customizing the size argument of bsButton() no longer leads to size changes within the UI.

Any idea what I did within my application (too complex to be paste) leading to such a behavior?

Loaded packages are:

  library(plyr) 
  require(dplyr)
  library(shiny)
  library(shinyBS)
  library(shinyWidgets) 
  library(shinyjs) 
  library(shinydashboard)
  library(shinydashboardPlus)
  library(dashboardthemes)

I do have shiny::includeCSS("www/style.css") in my dashboardBody() element which I commented to see if it came from here, but no (it stores {font-family: Century Gothic, sans-serif;} for *, input, label and h1-4). I also do have some tags$style() but still, even all disable that does not fix the issue.

I am really eager to understand what I did to modify the styling of those buttons.

[edit] I noticed that I have the same type of problem with argument type of showNotification() as well, where whatever type I give the notification is always the gray default one.

Answer 1

The dashboardthemes package originally had a request from a user to be able to change the height of buttons in the entire application. Because of that, there is a parameter available in the shinyDashboardThemeDIY function called buttonHeight which has a default value (34) but can be changed.

You can solve your problem by using the below code - it is the grey_light theme, but with the extra buttonHeight = "auto" line added at the very end. This will enable shinyBS to override the behavioiur of individual buttons.

Just to note, I generally don't check for compatibility issues with other packages apart from the main shinydashboard one due to resource constraints.

Fix for your problem:

shinyDashboardThemeDIY(
  
  ### general
  appFontFamily = "Arial"
  ,appFontColor = "rgb(45,45,45)"
  ,primaryFontColor = "rgb(15,15,15)"
  ,infoFontColor = "rgb(15,15,15)"
  ,successFontColor = "rgb(15,15,15)"
  ,warningFontColor = "rgb(15,15,15)"
  ,dangerFontColor = "rgb(15,15,15)"
  ,bodyBackColor = "rgb(240,240,240)"
  
  ### header
  ,logoBackColor = "rgb(120,120,120)"
  
  ,headerButtonBackColor = "rgb(120,120,120)"
  ,headerButtonIconColor = "rgb(220,220,220)"
  ,headerButtonBackColorHover = "rgb(100,100,100)"
  ,headerButtonIconColorHover = "rgb(60,60,60)"
  
  ,headerBackColor = "rgb(120,120,120)"
  ,headerBoxShadowColor = "#dfdfdf"
  ,headerBoxShadowSize = "3px 5px 5px"
  
  ### sidebar
  ,sidebarBackColor = "rgb(255,255,255)"
  ,sidebarPadding = 0
  
  ,sidebarMenuBackColor = "transparent"
  ,sidebarMenuPadding = 0
  ,sidebarMenuBorderRadius = 0
  
  ,sidebarShadowRadius = "3px 5px 5px"
  ,sidebarShadowColor = "#dfdfdf"
  
  ,sidebarUserTextColor = "rgb(115,115,115)"
  
  ,sidebarSearchBackColor = "rgb(240,240,240)"
  ,sidebarSearchIconColor = "rgb(100,100,100)"
  ,sidebarSearchBorderColor = "rgb(220,220,220)"
  
  ,sidebarTabTextColor = "rgb(100,100,100)"
  ,sidebarTabTextSize = 14
  ,sidebarTabBorderStyle = "none"
  ,sidebarTabBorderColor = "none"
  ,sidebarTabBorderWidth = 0
  
  ,sidebarTabBackColorSelected = "rgb(230,230,230)"
  ,sidebarTabTextColorSelected = "rgb(0,0,0)"
  ,sidebarTabRadiusSelected = "0px"
  
  ,sidebarTabBackColorHover = "rgb(245,245,245)"
  ,sidebarTabTextColorHover = "rgb(0,0,0)"
  ,sidebarTabBorderStyleHover = "none solid none none"
  ,sidebarTabBorderColorHover = "rgb(200,200,200)"
  ,sidebarTabBorderWidthHover = 4
  ,sidebarTabRadiusHover = "0px"
  
  ,boxBackColor = "rgb(248,248,248)"
  ,boxBorderRadius = 5
  ,boxShadowSize = "none"
  ,boxShadowColor = ""
  ,boxTitleSize = 18
  ,boxDefaultColor = "rgb(225,225,225)"
  ,boxPrimaryColor = "rgb(95,155,213)"
  ,boxInfoColor = "rgb(180,180,180)"
  ,boxSuccessColor = "rgb(112,173,71)"
  ,boxWarningColor = "rgb(237,125,49)"
  ,boxDangerColor = "rgb(232,76,34)"
  
  ,tabBoxTabColor = "rgb(248,248,248)"
  ,tabBoxTabTextSize = 14
  ,tabBoxTabTextColor = "rgb(100,100,100)"
  ,tabBoxTabTextColorSelected = "rgb(45,45,45)"
  ,tabBoxBackColor = "rgb(248,248,248)"
  ,tabBoxHighlightColor = "rgb(200,200,200)"
  ,tabBoxBorderRadius = 5
  
  ### inputs
  ,buttonBackColor = "rgb(215,215,215)"
  ,buttonTextColor = "rgb(45,45,45)"
  ,buttonBorderColor = "rgb(150,150,150)"
  ,buttonBorderRadius = 5
  
  ,buttonBackColorHover = "rgb(190,190,190)"
  ,buttonTextColorHover = "rgb(0,0,0)"
  ,buttonBorderColorHover = "rgb(150,150,150)"
  
  ,textboxBackColor = "rgb(255,255,255)"
  ,textboxBorderColor = "rgb(118,118,118)"
  ,textboxBorderRadius = 5
  ,textboxBackColorSelect = "rgb(245,245,245)"
  ,textboxBorderColorSelect = "rgb(108,108,108)"
  
  ### tables
  ,tableBackColor = "rgb(248,248,248)"
  ,tableBorderColor = "rgb(238,238,238)"
  ,tableBorderTopSize = 1
  ,tableBorderRowSize = 1
  
  ### buttons
  ,buttonHeight = "auto"
  
)

Answer 2

Found it! It was due to the following code:

      dashboardthemes::shinyDashboardThemes(theme = "grey_light"),

which embeds some CSS behind and somehow must prevent size change to the button "default" type.

Now I just wonder how to workaround that...