`toolbar_download_button()`

[jack-davison]

Morning folks,

I've been playing with the dev version of {bslib} incl. the toolbar options and they're really neat.

I was curious whether it'd be possible to include a toolbar_download_button() to accompany the toolbar_input_button()?

I'm keen to do something like the below where you have a table in a card and a nice elegant "download" option in the card header.

card(
  card_header(
    "Flower Data",
    toolbar(
      align = "right",
      toolbar_download_button("btn", label = "Download", icon = icon("download")) # maybe this icon is the default?
    )
  ),
  card_body(
    reactable::reactable(iris)
  )
)

Cheers!

[elnelson575]

So glad you're finding the toolbar_*options useful! We've been prioritizing inputs to bring over to toolbar styling, so knowing that a toolbar_download_button() would be useful is really helpful, I'll bump it up the list to get in there soon.

In the meantime, you can get most of the way there dropping in some toolbar classes and a little bit of styling. You unfortunately don't get the nice tooltip this way, but you can get the aria with aria-label and title (though you could probably get away with one or the other):

# Using a Download Button as a Toolbar Button

library(shiny)
library(bslib)

ui <- page_fluid(
  card(
    card_header(
      "Sales Data",
      toolbar(
        align = "right",
        # Download button styled to match toolbar buttons
        downloadButton(
          "download_data",
          label = "",
          icon = icon("download"),
          class = "bslib-toolbar-input-button btn-sm border-0", # Gets you most of the toolbar styling
          `data-type` = "icon", # Makes sure the right rules apply for an icon-only button
          title = "Download data", # Extra labeling for screenreaders since we're pulling label
          `aria-label` = "Download data", # Additional labeling for screenreaders
          style = paste(
            "padding: 0;",
            "display: flex;",
            "align-items: center;",
            "justify-content: center;"
          )
        )
      )
    ),
    card_body(
      tableOutput("data_table")
    )
  )
)

server <- function(input, output, session) {
  output$data_table <- renderTable({
    head(mtcars, 10)
  })

  output$download_data <- downloadHandler(
    filename = function() {
      paste("data-", Sys.Date(), ".csv", sep = "")
    },
    content = function(file) {
      write.csv(mtcars, file, row.names = FALSE)
    }
  )
}

shinyApp(ui, server)