BadgeGroup
A pill that pairs a small addon tag with a short message. When the outer variant is brand (dark), the inner addon auto-flips to lime — the BTNG two-colour pairing, without the consumer having to think about it.
Configurator
Watch the inner addon flip colour as you toggle the outer variant. Brand → accent, accent → brand, everything else → white.
<BadgeGroup variant="brand">
<BadgeGroupAddon>New</BadgeGroupAddon>
We shipped the configurator.
<ArrowRight weight="bold" />
</BadgeGroup>All variants
Addon colour is derived from the outer variant. Notice the brand/accent pair — dark outer gets lime inside; lime outer gets dark inside.
Sizes
md (28 tall, default) · lg (32 tall).
As a link
Wrap the whole BadgeGroup in an anchor for a clickable callout. Typical placement: above a hero headline, under the eyebrow.
Reasoning
BadgeGroup exists because “tag plus sentence plus arrow” is a real pattern that teams otherwise rebuild per site. It lives above hero headlines as a changelog pointer, under product titles as a version pill, inside email templates as a release marker.
The key decision is the auto-flip. When the outer pill is dark (brand variant, brand-900 background), the inner addon becomes lime-300 — the two BTNG colours paired on-surface, exactly as you asked. The message text inherits brand-100 and any unspecified trailing icon softens to brand-200 so it reads as a quieter affordance. The inverse holds for accent: lime outer gets a dark brand inner, so the addon still pops.
Other variants keep the addon on a white background with the outer's tone colour — it reads as a label stuck onto the pill rather than a callout inside it. That's the right weight for neutral, destructive, warning, success: the addon is metadata, not the headline.