Search code examples
cssrbuttonshinyshinywidgets

How to reduce size of button below xs in shiny?

I want to add information buttons to my app that display a tooltip when hovered over. I have a working code but the size of the buttons is too large. Is there some way this can be edited through css, or a button that is more customisable sizewise?

Thanks for your help

enter image description here

library(shiny)
library(shinyWidgets)
library(shinyBS)

ui <- fluidPage(uiOutput("test_button"))

server <- function(input, output) { 
  
  output$test_button <- renderUI({
    
    tipify(
      actionBttn(inputId = "id_my_button",
                      icon = icon("info"),
                      size = "xs",
                      style = "material-circle",
                      color = "primary"),
      "This button needs to be smaller!")
    
    })
  
}

shinyApp(ui, server)
Solution

  • You can customize the xs size settings using some of the following CSS properties that have been added to your code.

    library(shiny)
library(shinyWidgets)
library(shinyBS)

ui <- fluidPage(
  
  tags$head(
    tags$style(".bttn-material-circle.bttn-xs { 
                            
                            width: 16px !important; 
                            height: 16px !important;
                            font-size: 6px !important;
                            line-height: 1px !important;
                            padding: 0px !important;

               }")
  ),
  uiOutput("test_button")
  
  )

server <- function(input, output) { 
  
  output$test_button <- renderUI({
    
    tipify(
      actionBttn(inputId = "id_my_button",
                 icon = icon("info"),
                 size =
                 style = "material-circle",
                 color = "primary"),
      "This button needs to be smaller!")
    
  })
  
}

shinyApp(ui, server)