Indicators

Savings Badge

A savings badge component

Overview

The Savings Badge component displays a discount or savings message (e.g. “-10%” or “Save 20%”) on product tiles or pricing to highlight promotional value.

Key Business & UX Benefits

Surfaces savings so customers see the deal at a glance.
Themed variants (e.g. sale) keep badges consistent.
Compact display fits product cards and pricing blocks.
Supports percentage or fixed amount display.

Pro-Tip from Larry: Use Savings Badge on product tiles so customers see the discount before clicking.

Usage

SavingsBadge

<SavingsBadge :savingPercentage="10" badgeVariant="sale" />

Feature List

Savings percentage or amount display
Themed variants (e.g. sale) for consistency
Compact display for product tiles and pricing
Configurable badge variant and styling

API Reference

Prop	Default	Type
`savingPercentage`required		`number`
`badgeVariant`	`promo`	`"promo" \| "sale" \| "new"`

Edit this pageorReport an issue

Rating Summary Small

A rating summary component

Stars Rating

Rating gives you a nice way to display a rating both with graphics and through text. This can be used to show the rating of a product, score for a review, or any other rating you might need.