Badge Component

Create a count-indicator badge using Designsystemet styles.

Usage

ds_badge(
  count = NULL,
  color = NULL,
  variant = NULL,
  size = NULL,
  class = NULL,
  ...
)

Arguments

count

Numeric or character value shown inside the badge circle. Pass NULL for a plain dot.

color

Color context: one of "info", "success", "warning", "danger", "accent", "neutral", "brand1", "brand2". Maps to the DS data-color attribute.

variant

Structural variant: "tinted" for a muted background. Colour variants belong in color, not here.

size

Size variant ("sm", "md", "lg").

class

Additional CSS classes.

...

Additional attributes passed to the <span>.

Value

A Shiny tag object

Details

The badge is a small circle that sits on top of another element (e.g. a button) to show a numeric count. Wrap the target element with a ds_badge_position() container and place ds_badge() inside it.

The circle text comes from count; ... is the accessible label for the element being badged (rendered as invisible span text).

Examples

# Standalone dot with no count
ds_badge(color = "success")
#> <span class="ds-badge" data-color="success"></span>

# Count badge on a button (typical use — see ds_badge_position())
if (FALSE) { # \dontrun{
ds_badge_position(
  ds_button("Inbox"),
  ds_badge(count = 4, color = "danger")
)
} # }