5

Anyone know how to change the shape of a action button from a square to a circle in shiny??

library(shiny)

ui <- fluidPage(
  h1("Some text:"),
  tags$head(tags$script(src = "Welcome.js")),
  tags$button(id="intro", 
              type="button", 
              class="btn action-button btn-success btn-lg ",
              strong(HTML('<i class="icon-star">  </i>Some text')))
)

Thanks

DC

Daniel Cuartas Rocha
  • 63
  • 1
  • 6

1 Answers1

9

To change the shape of the action button you can use CSS. One way would be:

.btn {
  display:block;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  border: 1px solid red;
}

, source: Circle button css. That would create a cirular action button.

To add CSS in your shiny app you can use tags$head(tags$style(HTML(...))):

Reproducible example: 

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
                  .btn {
                    display:block;
                    height: 60px;
                    width: 60px;
                    border-radius: 50%;
                    border: 1px solid red;

                    }

                    "))
    ),
  actionButton("do", "Go!")
)

server <- function(input, output, session) {
  observeEvent(input$do, {
    print(2)
  })
}

shinyApp(ui, server)
Tonio Liebrand
  • 17,189
  • 4
  • 39
  • 59
  • Great and useful answer! Is there any chance you could also show how to customize the font size of the text displayed in the button? Thank you – Angelo May 05 '21 at 15:37
  • you can try using `font-size: 22px;`. Feel free to open a new question and link it here if the hint does not work for you – Tonio Liebrand May 05 '21 at 15:42