Buttons

Description

Twitter Bootstrap gives many options for styling buttons that aren't made available by standard Shiny. Use shinyBS to create buttons of different sizes, shapes, and colors.

Details

Create a button in the UI with list("bsButton"). If type = "action" the button will behave like the standard list("actionButton") in shiny. If type = "toggle" the button will behave like a list("checkboxInput") with an on and off state. It will return TRUE or FALSE to the Server depending on its state.

You can update the style and state of a list("bsButton") from the Server logic with list("updateButton"). For example, a button could be set to disabled = TRUE until the user has made some other selections, then once those selections have been made, an observer on the Server could use list("updateButton") to enable the button allowing the user to proceed. Alternatively, you could set the button to style = "success" to let them know that the button is ready to be clicked.

Components

bsButton

bsButton is used in your UI script to create customizable action and toggle buttons.

Usage

bsButton(inputId, label, icon = NULL, ..., style = "default",
  size = "default", type = "action", block = FALSE, disabled = FALSE,
  value = FALSE)

Parameters

inputId
Specifies the input slot that will be used to access the value.
label
The contents of the button or link--usually a text label, but you could also use any other HTML, like an image.
icon
An optional list("icon") to appear on the button.
...
Named attributes to be applied to the button or link.
style
A Bootstrap style to apply to the button. (default, primary, success, info, warning, or danger)
size
The size of the button (extra-small, small, default, or large)
type
The type of button to create. (action or toggle)
block
logical Should the button take the full width of the parent element?
disabled
logical Should the button be disabled (un-clickable)?
value
logical If type = "toggle", the initial value of the button.

updateButton

updateButton is used in your Server logic to update the style or state of a button.

Usage

updateButton(session, inputId, label = NULL, icon = NULL, value = NULL,
  style = NULL, size = NULL, block = NULL, disabled = NULL)

Parameters

session
The session object passed to function given to shinyServer.
inputId
Specifies the input slot that will be used to access the value.
label
The contents of the button or link--usually a text label, but you could also use any other HTML, like an image.
icon
An optional list("icon") to appear on the button.
value
logical If type = "toggle", the initial value of the button.
style
A Bootstrap style to apply to the button. (default, primary, success, info, warning, or danger)
size
The size of the button (extra-small, small, default, or large)
block
logical Should the button take the full width of the parent element?
disabled
logical Should the button be disabled (un-clickable)?

Changes

bsActionButton and bsToggleButton were replaced with just list("bsButton") with a type argument.

icon was added to allow placing an icon in the button.

Example



library(shiny)
library(shinyBS)
shinyApp(
 ui =
   fluidPage(
     sidebarLayout(
       sidebarPanel(
         sliderInput("bins",
                     "Move the slider to see its effect on the button below:",
                     min = 1,
                     max = 50,
                     value = 1),
         bsButton("actTwo", label = "Click me if you dare!", icon = icon("ban")),
         tags$p("Clicking the first button below changes the disabled state of the second button."),
         bsButton("togOne", label = "Toggle 'Block Action Button' disabled status", block = TRUE, type = "toggle", value = TRUE),
         bsButton("actOne", label = "Block Action Button", block = TRUE)

       ),
       mainPanel(
         textOutput("exampleText")
       )
     )
   ),
 server =
   function(input, output, session) {
     observeEvent(input$togOne, ({
       updateButton(session, "actOne", disabled = !input$togOne)
     }))
     observeEvent(input$bins, ({

       b <- input$bins
       disabled = NULL
       style = "default"
       icon = ""

       if(b < 5) {
         disabled = TRUE
         icon <- icon("ban")
       } else {
         disabled = FALSE
       }

       if(b < 15 | b > 35) {
         style = "danger"
       } else if(b < 20 | b > 30) {
         style = "warning"
       } else {
         style = "default"
         icon = icon("check")
       }

       updateButton(session, "actTwo", disabled = disabled, style = style, icon = icon)

     }))

     output$exampleText <- renderText({
       input$actTwo
       b <- isolate(input$bins)
       txt = ""
       if((b > 5 & b < 15) | b > 35) {
         txt = "That was dangerous."
       } else if((b > 5 & b < 20) | b > 30) {
         txt = "I warned you about that."
       } else if(b >= 20 &  b <= 30) {
         txt = "You have choosen... wisely."
       }
       return(txt)
     })
   }
)