Documentation
Feedback
Guides
Storefront Development

Storefront Development
Discount Badge

A custom Badge that display product's discounts.

Overview

Example
Code
11% off
38% off
50% off
11% off

Import

Import the component from @faststore/ui

_10
import { DiscountBadge } from '@faststore/ui'

Import Styles

_10
import '@faststore/ui/src/components/atoms/Badge/styles.scss'
_10
import '@faststore/ui/src/components/molecules/DiscountBadge/styles.scss'


Usage

11% off

_10
<DiscountBadge listPrice={45} spotPrice={40} />


Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-discount-badge
listPrice*numberSpecifies price without discount applied.
spotPrice*numberSpecifies current price with discount applied.
thresholdLownumberSets the limit percentage value to consider a low discount.15
thresholdHighnumberSets the limit percentage value to consider a high discount.40
size"small" | "big"Specifies the size variant.

Design Tokens

This component inherits Badge design tokens.

Variants

Low Discount

11% off

_10
<DiscountBadge listPrice={45} spotPrice={40} />

Local tokenDefault value/Global token linked
--fs-discount-badge-low-bkg-color
var(--fs-badge-success-bkg-color)
--fs-discount-badge-low-text-color
var(--fs-badge-success-text-color)
--fs-discount-badge-low-border-color
var(--fs-badge-success-border-color)

Medium Discount

38% off

_10
<DiscountBadge listPrice={65} spotPrice={40} />

Local tokenDefault value/Global token linked
--fs-discount-badge-medium-bkg-color
var(--fs-badge-warning-bkg-color)
--fs-discount-badge-medium-text-color
var(--fs-badge-warning-text-color)
--fs-discount-badge-medium-border-color
var(--fs-badge-warning-border-color)

High Discount

50% off

_10
<DiscountBadge listPrice={80} spotPrice={40} />

Local tokenDefault value/Global token linked
--fs-discount-badge-high-bkg-color
var(--fs-badge-danger-bkg-color)
--fs-discount-badge-high-text-color
var(--fs-badge-danger-text-color)
--fs-discount-badge-high-border-color
var(--fs-badge-danger-border-color)

Customization

For further customization, you can use the following data attributes:
data-fs-discount-badge
data-fs-discount-badge-variant
This component inherits Badge css selectors and styles.
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page