Badge • shiny.element

Basic Usage

Displays the amount of new messages.

The amount is defined with value which accepts Number or String.

item <- function(...) tags$span(style = "margin-right: 40px", ...)
tagList(
  item(el_badge(value = 12, el_button("bd1", "comments"))),
  item(el_badge(value = 3, el_button("bd2", "replies"))),
  item(el_badge(value = 1, type = "primary", el_button("bd3", "comments"))),
  item(el_badge(value = 2, type = "warning", el_button("bd4", "replies"))),
  item(el_badge(
    value = 1,
    color = "green",
    el_button("bd5", "custom background")
  )),
  el_dropdown(
    "bd_menu",
    trigger = "click",
    trigger_label = tags$span(
      class = "el-dropdown-link",
      "Click Me",
      el_icon("CaretBottom", class = "el-icon--right")
    ),
    items = list(
      el_dropdown_item(
        "comments",
        tagList("comments", el$badge(class = "mark", `:value` = "12"))
      ),
      el_dropdown_item(
        "replies",
        tagList("replies", el$badge(class = "mark", `:value` = "3"))
      )
    )
  )
)

¹²

³

¹

²

¹

Max Value

You can customize the max value.

The max value is defined by property max which is a Number. Note that it only works when value is also a Number.

tagList(
  tags$span(
    style = "margin-right: 40px",
    el_badge(value = 200, max = 99, el_button("bm1", "comments"))
  ),
  el_badge(value = 100, max = 10, el_button("bm2", "replies"))
)

⁹⁹⁺

¹⁰⁺

Customizations

Displays text content other than numbers. Or you can use the content slot to customize content.

When value is a String, it can display customized text. Or use the content slot.

tagList(
  tags$span(
    style = "margin-right: 40px",
    el_badge(value = "new", el_button("bc1", "comments"))
  ),
  el_badge(value = "hot", el_button("bc2", "replies"))
)

^new

^hot

Red Dot

Use a red dot to mark content that needs to be noticed.

Use the attribute is-dot. It is a Boolean.

tagList(
  tags$span(style = "margin-right: 40px", el_badge(is_dot = TRUE, "query")),
  el_badge(
    is_dot = TRUE,
    el_button("bdot", NULL, icon = "Share", type = "primary")
  )
)

query

Offset

Set offset of the badge dot, the format is [left, top], which represents the offset of the status dot from the left and top of the default position.

el_badge(value = 1, offset = c(10, 5), el_button("boff", "offset"))

¹

API

Element Plus’s tables, and beside each entry where it is in R.

Attributes

Element	In R	Description	Type	Default
`value`	`value`	display value.	¹ / ²	’’
`max`	`max`	maximum value, shows `{max}+` when exceeded. Only works if value is a number.	³	99
`is-dot`	`is_dot`	if a little dot is displayed.	⁴	false
`hidden`	`hidden`	hidden badge.	⁵	false
`type`	`type`	badge type.	⁶`'primary' \\\| 'success' \\\| 'warning' \\\| 'danger' \\\| 'info'`	danger
`show-zero`	`show_zero`	Whether to show badge when value is zero.	⁷	true
`color`	`color`	background color of the dot	⁸
`offset`	`offset`	offset of badge	⁹`[number, number]`	[0, 0]
`badge-style`	`badge_style`	custom style of badge	¹⁰`CSSProperties`	—
`badge-class`	`badge_class`	custom class of badge	¹¹	—

Slots

Element	In R	Description
`default`	default content	customize default content
`content`	`slots = list(content = )`	customize badge content