Button and link inputs

Button inputs are useful as triggers for reactive or observer expressions. The reactive value of a button input begins as NULL, but subsequently is the number of clicks.

buttonInput(id, label, ..., stretch = FALSE, download = FALSE, tooltip = NULL)

updateButtonInput(
  id,
  label = NULL,
  value = NULL,
  disable = NULL,
  enable = NULL,
  tooltip = NULL,
  session = getDefaultReactiveDomain()
)

linkInput(id, label, ..., stretch = FALSE, download = FALSE, tooltip = NULL)

updateLinkInput(
  id,
  label = NULL,
  value = NULL,
  enable = NULL,
  disable = NULL,
  tooltip = NULL,
  session = getDefaultReactiveDomain()
)

tooltip(..., placement = "top", fade = TRUE)

Arguments

id	A character string specifying the id of the reactive input.
label	A character string specifying the label text on the button or link input.
...	Additional named arguments passed as HTML attributes to the parent element.
stretch	One of `TRUE` or `FALSE` specifying stretched behaviour for the button or link input, defaults to `FALSE`. If `TRUE`, the button or link will receive clicks from its containing block element. For example, a stretched button or link inside a `card()` would update whenever the user clicked on the card.
download	One of `TRUE` or `FALSE` specifying if the button or link input is used to trigger a download, defaults to `FALSE`.
tooltip	A call to `tooltip()` specifying a tooltip for the button or link input, defaults to `NULL`.
value	A number specifying a new value for the button, defaults to `NULL`.
disable	if `TRUE` the button is disabled and will not react to clicks from the user, default to `NULL`.
enable	If `TRUE` the button is enabled and will react to clicks from the user, defaults to `NULL`.
session	A reactive context, defaults to `getDefaultReactiveDomain()`.
placement	One of `"top"`, `"right"`, `"bottom"`, or `"left"` specifying what side of the tag element the tooltip appears on.
fade	One of `TRUE` or `FALSE` specifying if the tooltip fades in when shown and fades out when hidden, defaults to `TRUE`.

Details

Tooltips

To remove a button or link input's tooltip pass an empty tooltip, tooltip(), to updateButtonInput() or updateLinkInput().

Examples


### A simple button

buttonInput(
  id = "button1",
  label = "Simple"
)
#> <button class="yonder-button btn btn-grey" type="button" role="button" id="button1" autocomplete="off">Simple</button>

# Alternatively, a button can fill the width of its parent element.

buttonInput(
  id = "button2",
  label = "Full-width",
  fill = TRUE  # <-
) %>%
  background("red")
#> <button class="yonder-button btn btn-red" type="button" role="button" id="button2" fill="TRUE" autocomplete="off">Full-width</button>

# Use design utilities to further adjust the width of a button.

buttonInput(
  id = "button3",
  label = "Full and back again",
  fill = TRUE  # <-
) %>%
  background("red") %>%
  width("3/4")  # <-
#> <button class="yonder-button btn btn-red w-3/4" type="button" role="button" id="button3" fill="TRUE" autocomplete="off">Full and back again</button>

### Possible colors

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

lapply(
  colors,
  function(color) {
    buttonInput(
      id = color,
      label = color
    ) %>%
      background(color) %>%
      margin(2)
  }
) %>%
  div() %>%
  display("flex") %>%
  flex(wrap = TRUE)
#> <div class="d-flex flex-wrap">
#>   <button class="yonder-button btn btn-red m-2" type="button" role="button" id="red" autocomplete="off">red</button>
#>   <button class="yonder-button btn btn-purple m-2" type="button" role="button" id="purple" autocomplete="off">purple</button>
#>   <button class="yonder-button btn btn-indigo m-2" type="button" role="button" id="indigo" autocomplete="off">indigo</button>
#>   <button class="yonder-button btn btn-blue m-2" type="button" role="button" id="blue" autocomplete="off">blue</button>
#>   <button class="yonder-button btn btn-cyan m-2" type="button" role="button" id="cyan" autocomplete="off">cyan</button>
#>   <button class="yonder-button btn btn-teal m-2" type="button" role="button" id="teal" autocomplete="off">teal</button>
#>   <button class="yonder-button btn btn-green m-2" type="button" role="button" id="green" autocomplete="off">green</button>
#>   <button class="yonder-button btn btn-yellow m-2" type="button" role="button" id="yellow" autocomplete="off">yellow</button>
#>   <button class="yonder-button btn btn-amber m-2" type="button" role="button" id="amber" autocomplete="off">amber</button>
#>   <button class="yonder-button btn btn-orange m-2" type="button" role="button" id="orange" autocomplete="off">orange</button>
#>   <button class="yonder-button btn btn-grey m-2" type="button" role="button" id="grey" autocomplete="off">grey</button>
#> </div>

### Reactive links

div("Curabitur ", linkInput("link1", "vulputate"), " vestibulum lorem.")
#> <div>
#>   Curabitur 
#>   <button class="yonder-link btn btn-link" id="link1">vulputate</button>
#>    vestibulum lorem.
#> </div>

### Stretched buttons and links

card(
  header = "Card with stretched button",
  p("Notice when you hover over the card, the button also detects ",
    "the hover."),
  buttonInput(
    id = "go",
    label = "Go go go",
    stretch = TRUE
  ) %>%
    background("blue")
) %>%
  width(20)
#> <div class="card w-20">
#>   <div class="card-header">Card with stretched button</div>
#>   <div class="card-body">
#>     <p class="card-text">
#>       Notice when you hover over the card, the button also detects 
#>       the hover.
#>     </p>
#>     <button class="yonder-button btn stretched-link btn-blue" type="button" role="button" id="go" autocomplete="off">Go go go</button>
#>   </div>
#> </div>

### Download button

buttonInput(
  download = TRUE,
  id = "download1",
  label = "Download",
  icon("download")
)
#> <a class="yonder-button btn btn-grey shiny-download-link" type="button" role="button" href="" _target download id="download1" autocomplete="off">
#>   Download
#>   <i class="fa fa-download"></i>
#> </a>

Arguments

Details

See also

Examples

Contents