Indicators

Badge Promotion

Promotional badge atom for product tiles and pricing with promo, sale, new, and icon variants.

Loading playground

Overview

BadgePromotion is the promotional badge atom for product tiles and pricing. The discriminated variant prop picks the visual treatment:

`variant`	Use for
`'promo'`	Generic promotional callouts (gift-with-purchase, bundle, free shipping).
`'sale'`	Discount callouts, usually paired with `savingPercentage`.
`'new'`	Fresh-stock or new-arrival callouts.
`'icon'`	Icon-only badges driven by the `icon` prop.

The BEM root class is .badge-promotion and the locale namespace is badgePromotion.*.

Key Business & UX Benefits

One promotional badge covers gift-with-purchase, sale, new arrival, and icon callouts, so storefronts stay visually coherent across every campaign.
A typed variant prop forces merchandisers and engineers onto a fixed set of promo treatments, preventing rogue one-off styles from creeping into PDPs and PLPs.
Locale namespace badgePromotion.* keeps copy translation-ready, so country sites can swap "Sale" for the local term without code changes.
Pairing savingPercentage with variant="sale" puts the discount front and center, which lifts click-through on promo grids and supports markdown-driven AOV.

Pro-Tip from Larry: Use variant="sale" with a savingPercentage when you want the discount visible at a glance, and variant="new" (no percentage) for fresh-stock callouts.

Usage

LBadgePromotion

<LBadgePromotion variant="sale" :saving-percentage="10" />

Feature List

Four discriminated `variant` values ('promo', 'sale', 'new', 'icon') keep merchandising on a fixed set of promo treatments
`savingPercentage` pairs with `variant="sale"` to put the discount front and center on promo grids
`variant="icon"` drives icon-only badges through the `icon` prop, so glyph-led promos share the same primitive
Locale namespace `badgePromotion.*` keeps every variant's copy translation-ready out of the box
BEM root class `.badge-promotion` anchors per-variant theme overrides without prop sprawl

API Reference

Prop	Default	Type
`variant`	`promo`	`"icon" \| "promo" \| "sale" \| "new"` Visual variant. `icon` renders a square tile sized for an icon.
`radius`	`equal`	`"equal" \| "unequal"` Corner radius preset. `equal` uses a single token, `unequal` maps the per-corner tokens.
`size`	`m`	`"s" \| "m"` Size preset.
`icon`		`string` Icon name (used when `icon` is passed, regardless of variant).
`text`		`string` Text content. Ignored when `savingPercentage` is set.
`savingPercentage`		`number` Convenience: renders the localized "Save X%" string. Takes precedence over `text` and `icon`.
`withNotch`	`false`	`boolean` Render a decorative notch behind the badge (for ribbon-adjacent use, e.g. next to a price).

Edit this pageorReport an issue

Stars Rating

Star graphic with optional text for displaying a numeric rating on products, reviews, or any rating context.

Highlighted Text

Renders a string with substring matches wrapped in `<mark>`. Diacritic-insensitive, finds every occurrence, and accepts a custom highlight class.