Skip to content

feat: add toolbar_badge() and update_toolbar_badge() (#1316)#1318

Draft
elnelson575 wants to merge 22 commits into
mainfrom
feat/toolbar-badge
Draft

feat: add toolbar_badge() and update_toolbar_badge() (#1316)#1318
elnelson575 wants to merge 22 commits into
mainfrom
feat/toolbar-badge

Conversation

@elnelson575
Copy link
Copy Markdown
Contributor

@elnelson575 elnelson575 commented May 26, 2026

Summary

  • Adds toolbar_badge() — a pure display element for showing status text and icons inside a toolbar(), using Bootstrap's badge component (text-bg-{color}, optional rounded-pill, optional border for outline-only style)
  • Adds update_toolbar_badge() — server-side update function using sendCustomMessage (not an input binding) to update label, icon, color, border, pill, and show_label
  • Adds toolbarBadge.ts JS handler and .bslib-toolbar-badge SCSS rule; updates the toolbar example app with live badge demos

Design decisions

  • Pure display element (no Shiny input binding) — badge state flows one way from server to browser; no input$badge_id side effects or bookmarking noise
  • Follows toolbar_input_button() aria pattern — randomly generated label_id, hidden attribute + aria-labelledby so screen readers read the label even in icon-only mode
  • Tooltip defaults to !show_label — icon-only badges get a tooltip by default, matching the button family
  • border = TRUE for outline style — uses Bootstrap's border border-{color} text-{color} utilities instead of text-bg-{color}; data-bslib-color and data-bslib-border attributes track state so update_toolbar_badge() can toggle either independently

Sample images

Toolbar badge showing record numbers
Screenshot 2026-05-26 at 2 21 34 PM

Toolbar badge showing "Live"
Screenshot 2026-05-26 at 1 59 24 PM

Toolbar badge in text input showing number of messages
Screenshot 2026-05-26 at 1 59 55 PM

Test plan

  • 186 toolbar tests pass (devtools::test(filter = "toolbar"))
  • toolbar_badge("Active") renders with text-bg-secondary badge classes
  • toolbar_badge("Active", border = TRUE) renders with border border-secondary text-secondary classes (no text-bg-*)
  • Icon-only badge wraps in bslib-tooltip with {id}_tooltip id
  • update_toolbar_badge() sends bslib.update-toolbar-badge custom message with only provided fields
  • Run shiny::runExample("toolbar", package = "bslib") and verify: record count badge (outline pill) shows in footer, activity status badge cycles with icon+color on refresh, chat message count updates reactively

Closes #1316

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Toolbar: Add toolbar_badge()

1 participant