⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

Discount Badge

A custom Badge that display product's discounts.

Overview


Import

Import the component from @faststore/ui

import { DiscountBadge } from '@faststore/ui'

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.


Usage

11% off
<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
<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
<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
<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.