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
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-discount-badge |
| listPrice* | number | Specifies price without discount applied. | |
| spotPrice* | number | Specifies current price with discount applied. | |
| thresholdLow | number | Sets the limit percentage value to consider a low discount. | 15 |
| thresholdHigh | number | Sets 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 token | Default 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 token | Default 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 token | Default 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.