UI components

For most of the UI components, you can view them in the online Shiny demo{blk}. Most but not all UI components work in a Rmarkdown document. Here we demostrate how you could use some of them in a Rmarkdown doc. The source code of this document is on Github{blk}.

load package

To start to use spsComps, load it in your Shiny app file or Rmarkdown file

## Loading required package: shiny

So you can see it depends on shiny. When you load it, there is no need to additionally load shiny.


A go top button.


It will not be display inline of the Rmd, just simply call it and maybe change the style as you want. By default, a “go to top” button will be created on the bottom-right corner. Now scroll this page, and you should see it (the rocket button).

texts <- c("p1", "p2", "", "p4", "p5")
hrefs <- c("https://github.com/lz100/spsComps/blob/master/img/1.jpg?raw=true",
images <- c("https://github.com/lz100/spsComps/blob/master/img/1.jpg?raw=true",
  texts = texts, hrefs = hrefs, images = images,
  enlarge = TRUE,
  # only "modal" methods workds in Rmd, but other methods work in Shiny
  enlarge_method = "modal" 

You can show a gallery of plots you make in the Rmd and when people click it, it will be enlarged. You can also specify a link for each image.


    "logo", "Logo",
    hex_img = "https://live.staticflickr.com/7875/46106952034_954b8775fa_b.jpg",
    hex_link = "https://www.google.com",
    footer = "Footer",
    footer_link = "https://www.google.com"

a panel of logos with hexPanel

    "demo1", "" ,
    rep("https://live.staticflickr.com/7875/46106952034_954b8775fa_b.jpg", 2)


Some colorful buttons hrefTab

    title = "Different background and text colors",
    label_texts = c("Go top", "Disabled", "Email me"),
    hrefs = c("#", "", "mailto:xxx@abc.com"),
    bg_colors = c("green", "#eee", "orange"),
    text_colors = c("#caffc1", "black", "blue")

Different background and text colors

A table colorful buttons hrefTable

    title = "Change button color and text color",
    item_titles = c("workflow 1", "No links"),
    item_labels = list(c("tab 1"), c("tab 3", "tab 4")),
    item_hrefs = list(c("https://www.google.com/"), c("", "")),
    item_bg_colors =  list(c("blue"), c("red", "orange")),
    item_text_colors =  list(c("black"), c("yellow", "green")),
    style = "display: table;"
Change button color and text color
Category Options
workflow 1 tab 1
No links tab 3 tab 4
    title = "Change row name colors and width",
    item_titles = c("Green", "Red", "Orange"),
    item_labels = list(c("tab 1"), c("tab 3", "tab 4"), c("tab 5", "tab 6", "tab 7")),
    item_hrefs = list(
        c("", ""),
        c("https://www.google.com/", "https://www.google.com/", "")
    item_title_colors = c("green", "red", "orange"),
    style = "display: table;"
Change row name colors and width
Category Options
Green tab 1
Red tab 3 tab 4
Orange tab 5 tab 6 tab 7

The table caption is on top in Shiny but on bottom in Rmd. You may also want to add the style = "display: table;" in Rmd to make the table occupy full length of the document in R markdown.



Add animations to existing components with animateUI

To buttons

tags$button(id = "btn1", "random button")

animateUI("btn1", animation = "ring")

To some text

p(id = "mytext", class = "text-red", "some move text")

some move text

animateUI("mytext", animation = "horizontal", speed = "fast")

On hover, move mouse on the red thumb

  id = "btn2",
  icon(id = "myicon", "thumbs-o-up"),
  style = "color: red; boarder: initial; border-color: transparent;"
## The `name` provided ('thumbs-o-up') is deprecated in Font Awesome 5:
## * please consider using 'thumbs-up' or 'fas fa-thumbs-up' instead
## * use the `verify_fa = FALSE` to deactivate these messages
animateUI("btn2", animation = "bounce", speed = "fast", hover = TRUE)

Inline animation

You can add animations to inline Rmarkdown text by giving it a HTML tag and id, like following:

some text some text <span id="some-text" style="display: inline-block">some text</span> some text some text

some text some text some text some text some text

animateUI(selector = "some-text", animation = "ring")

Most animations required the target tag to have CSS display “block” or “inline-block”, you can append this by adding style="display: inline-block" to the tag as shown above or check examples below.


Add animations with pipe %>% by animateAppend

icon("home") %>%

tags$p("Append animation", class = "text-primary", style="display: inline-block") %>%

Append animation


Apply multiple animations to the same component

tags$b("Nested animations", class = "text-primary") %>%
  animateAppendNested("ring") %>%
  animateAppendNested("pulse") %>%
Nested animations
tags$b("Nested animations display changed", class = "text-primary") %>%
  animateAppendNested("ring") %>%
  animateAppendNested("pulse", display = "block", style = "width: 30%")
Nested animations display changed


Here is a convenient function that allows you to create font-awesome icons with animations and customize, color, size, etc, an enhanced version of original shiny::icon and can also be used in Rmarkdown.


Default is the same as original icon


Animation and color

animateIcon(name = "home", animation = "horizontal", speed = "slow", color ="red")

Add to a button

tags$button(animateIcon("spinner", "spin", "fast"), "A button")

on hover

animateIcon(name = "wrench", animation = "wrench", hover = TRUE, color ="green")

Change size

animateIcon("home", size = "xs")

animateIcon("home", size = "sm")

animateIcon("home", size = "lg")

animateIcon("home", size = "2x")

animateIcon("home", size = "3x")

animateIcon("home", size = "5x")

animateIcon("home", size = "7x")

animateIcon("home", size = "10x")


Add loaders to indicate busy status. Most cases, loaders are added by a backend server to show the busy processing status and are removed when the process is done. Rmarkdown documents does not have a server, but you can still add some loaders.


Default loaders

There are 12 different default loaders: “circle,” “dual-ring,” “facebook,” “heart,” “ring,” “roller,” “default,” “ellipsis,” “grid,” “hourglass,” “ripple,” “spinner.”

cssLoader(height = "100px")

customize it:

cssLoader(type = "grid", height = "150px", color = "orange")

Add to a button:

  ## `inline = TRUE` is important if you want loader and
  ## text in the same line.
  cssLoader(is_icon = TRUE, inline = TRUE, color = "#3a7bd5"),
  "A button"

Your own loaders

You can choose a gif to be a your loader

cssLoader(type = "gif", src = "https://github.com/lz100/spsComps/blob/master/examples/demo/www/spinner.gif?raw=true", height = "100px")
cssLoader(type = "gif", src = "https://github.com/lz100/spsComps/blob/master/examples/demo/www/bean_eater.gif?raw=true", height = "150px")

bsTooltip and bsTip

Add tooltips to the documents with bsTooltip

actionButton("", "Tooltip on the left") %>%
 bsTooltip("Tooltip on the left", "left")
actionButton("", "Tooltip on the top") %>%
 bsTooltip("Tooltip on the top", "top")
actionButton("", "Tooltip on the right") %>%
 bsTooltip("Tooltip on the right", "right")
actionButton("", "Tooltip on the bottom") %>%
 bsTooltip("Tooltip on the bottom", "bottom")

or use the higher leveler convenient function bsTip

actionButton("", "primary") %>%
  bsTip("primary", status = "primary")
actionButton("", "info") %>%
  bsTip("info", status = "info")
actionButton("", "success") %>%
  bsTip("success", status = "success")
actionButton("", "warning") %>%
  bsTip("warning", status = "warning")
actionButton("", "danger") %>%
  bsTip("danger", status = "danger")

bsPopover and bsPop

There is no extra step if you use popovers in Shiny directly. In Rmarkdown, you need to add following as plain text close to the end of your Rmd:

<script src="https://cdn.jsdelivr.net/npm/jquery-popover@0.0.4/src/jquery-popover.min.js"></script>
  $('span[data-popoverid] script').map(function(){
      let el = document.createElement("script");
      el.innerHTML = $(this).html();

Add Popovers to the documents with bsPopover

span("Popover on the left") %>%
 bsPopover("Popover on the left", "Popover on the left", "left")
Popover on the left
span("Popover on the top") %>%
 bsPopover("Popover on the top", "Popover on the top", "top")
Popover on the top
span("Popover on the right") %>%
 bsPopover("Popover on the right", "Popover on the right", "right")
Popover on the right
span("Popover on the bottom") %>%
 bsPopover("Popover on the bottom", "Popover on the bottom", "bottom")
Popover on the bottom

or use the higher leveler convenient function bsPop

span("Popover") %>% bsPop("Popover", "Popover")

Titles with spsTitle

You can use {spsComps} to add colorful titles in Rmarkdown

spsTitle("primary", status = "primary")


spsTitle("info", status = "info")


spsTitle("success", status = "success")


spsTitle("warning", status = "warning")


spsTitle("danger", status = "danger")


Or you own colors

spsTitle("purple", other_color = "purple")


spsTitle("pink", other_color = "pink")


Add horizontal divider lines with spsHr






Other components

Other components are either performed the best in a Shiny app or requires a server. Please see the demo

Last modified 2021-12-15 : sps updates no_render (9924dd38)