UI of buttons in some bootswatch themes is semi-broken if using bootstrap > 3

[daattali]

For example, in the following app, the button's hover state is no different from the main state, which makes the button UI/UX not great.

library(shiny)

ui <- fluidPage(
  theme = bslib::bs_theme(bootswatch = "cerulean"),
  actionButton("test", "test")
)

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

shinyApp(ui, server)

If you use bs_theme(version = 3, bootswatch = "cerulean") then the button regains its hover state.

This is likely because buttons in shiny apply a default class of btn-default, which was available in bootstrap 3 but is no longer available in BS4/5. The closest relative is btn-outline-secondary.

[gadenbuie]

Hi @daattali, did you intend to open this issue in bslib? If so, I can transfer it over.

[daattali]

Whoops, yes I did! Please transfer to bslib

[gadenbuie]

Default buttons in BS4 and BS5 via bslib should match the .btn-secondary style buttons, and bslib does some work to patch Bootstrap or specific Bootswatch themes to support the btn-default class used by shiny::actionButton().

I can reproduce the issue you've described and from a quick perusal through other Bootswatch themes in the bs_theme_preview() app, it seems like the issue is primarily with the Cerulean theme in Bootstrap 5. So it's possible that we need a Cerulean-specific patch.

[daattali]

You're right, it seems most themes do work. I tried a few (not all), and solar also doesn't work correctly on hover.