feat(Badge): support a button after the text - #3049
Open
Lisa18289 wants to merge 8 commits into
Open
Conversation
Lisa18289
added
the
update-screenshots
Contributor
Coverage Report for ./packages/components/
File CoverageNo changed files found. |
github-actions
Bot
removed
the
update-screenshots
Lisa18289
force-pushed
the
claude/badge-button-after-text-0e8248
branch
from
September 1, 2026 09:46
900bd51 to
380c730
Compare
Lisa18289
force-pushed
the
claude/badge-button-after-text-0e8248
branch
from
September 1, 2026 09:52
380c730 to
6dd9054
Compare
A Button, CopyButton, Action, ContextualHelpTrigger or ModalTrigger in the badge content is moved to the end of the badge and rendered like the onClose icon. With both, the close icon stays rightmost. Triggers move along with their button — a button tunneled out on its own mounts outside the trigger and loses its press behavior. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Lisa18289
force-pushed
the
claude/badge-button-after-text-0e8248
branch
from
September 1, 2026 09:53
6dd9054 to
f340da9
Compare
Lisa18289
added
the
update-screenshots
github-actions
Bot
removed
the
update-screenshots
Contributor
🚀 Preview DeploymentPreview environments are ready:
Images:
|
Lisa18289
added
the
update-screenshots
github-actions
Bot
removed
the
update-screenshots
Co-authored-by: Lisa18289 <84317589+Lisa18289@users.noreply.github.com>
The badge does not remove itself — onClose renders the X and calls the handler, which decides what happens. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The two cases that carry the feature — a button after the text, with and without the close icon — move into "Badge colors", so every color and both alpha variants cover them. Drops the separate "Badge actions" scenario. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Lisa18289
added
the
update-screenshots
github-actions
Bot
removed
the
update-screenshots
Co-authored-by: Lisa18289 <84317589+Lisa18289@users.noreply.github.com>
Matches the "Mit Button" section it sits under. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The screenshots cover what the trailing button looks like and where it sits, in every color. What is left asserts the wiring: a button leaves the content, and action, modal and contextual help still fire from inside the badge. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
WithContextualHelp shows the trailing button; the close icon has its own story. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Lisa18289
marked this pull request as ready for review
September 1, 2026 12:09
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A
Button,CopyButton,Action,ContextualHelpTriggerorModalTriggerplaced in the badge content now renders at the end of the badge, shaped and colored exactly like theonCloseicon. With both, the close icon stays rightmost. The actual use case is aContextualHelpTrigger.Buttons reach that spot through a tunnel, the same way
LabelandHeadinghandle theirs. Triggers move along with their button: tunneling only the button would mount it outside the trigger, where it no longer gets its press behavior.Verification: browser tests cover the DOM order, the geometry against the close button, and that action, modal and contextual help still fire from inside the badge. The visual suite has a new
Badge actionsscenario; the existing badge baselines are untouched, so badges without a trailing button render exactly as before.Needs the
update-screenshotslabel — the new scenario only has-darwinbaselines so far.🤖 Generated with Claude Code