ds_badge: Badge Component

In shinyds: 'Shiny' Bindings for Designsystemet Components

Badge Component

Description

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>.

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).

Value

A Shiny tag object

Examples

# Standalone dot with no count
ds_badge(color = "success")

# Count badge on a button (typical use — see ds_badge_position())
## Not run: 
ds_badge_position(
  ds_button("Inbox"),
  ds_badge(count = 4, color = "danger")
)

## End(Not run)

shinyds documentation built on Aug. 22, 2026, 5:08 p.m.