Badges

Small highlighted content which scales to its parent's size. A badge may be dynamically updated with replaceContent(), in which case be sure to pass an id argument as part of ....

badge(...)

Arguments

...	Named arguments passed as HTML attributes to the parent element or tag elements passed as children to the parent element.

Example application

ui <- container(
  buttonInput(
    id = "clicker",
    label = list(
      "Clicks",
      badge(id = "counter") %>%
        margin(left = 2) %>%
        background("teal")
    )
  )
)

server <- function(input, output) {
  observe({
    clicks <- if (is.null(input$clicker)) 0 else input$clicker
    replaceContent("counter", clicks)
  })
}

shinyApp(ui, server)

See also

Other components: alert(), blockquote(), card(), collapsePane(), d1(), dropdown(), img(), jumbotron(), modal(), navContent(), popover(), pre(), toast()

Examples

### Possible colors

colors <- c(
  "red", "purple", "indigo", "blue", "cyan", "teal", "green",
  "yellow", "amber", "orange", "grey", "white"
)

div(
  lapply(colors, function(color) {
    badge(color) %>%
      background(color) %>%
      margin(2) %>%
      padding(1)
  })
) %>%
  display("flex") %>%
  flex(wrap = TRUE)
#> <div class="d-flex flex-wrap">
#>   <span class="badge badge-red m-2 p-1">red</span>
#>   <span class="badge badge-purple m-2 p-1">purple</span>
#>   <span class="badge badge-indigo m-2 p-1">indigo</span>
#>   <span class="badge badge-blue m-2 p-1">blue</span>
#>   <span class="badge badge-cyan m-2 p-1">cyan</span>
#>   <span class="badge badge-teal m-2 p-1">teal</span>
#>   <span class="badge badge-green m-2 p-1">green</span>
#>   <span class="badge badge-yellow m-2 p-1">yellow</span>
#>   <span class="badge badge-amber m-2 p-1">amber</span>
#>   <span class="badge badge-orange m-2 p-1">orange</span>
#>   <span class="badge badge-grey m-2 p-1">grey</span>
#>   <span class="badge badge-white m-2 p-1">white</span>
#> </div>