DiscountBadge
Displays product's discounts.
The
DiscountBadge displays product's discounts.Example
Code
11% off
38% off
50% off
11% off
Usage
Import the component
_10import { DiscountBadge } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/atoms/Badge/styles.scss" import_10 "@faststore/ui/src/components/molecules/DiscountBadge/styles.scss";
For details, see Importing FastStore UI component styles.
Examples
Variants
Low Discount
Example
Code
11% off
Medium discount
Example
Code
38% off
High discount
Example
Code
50% off
Design tokens
This component inherits Badge design tokens.
Design tokens: Low discount
| 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) |
Design tokens: Medium discount
| 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) |
Design tokens: High discount
| 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) |
Data attributes
You can target and override
DiscountBadge styles using the following data attributes:data-fs-discount-badgedata-fs-discount-badge-variantThis component inherits Badge css selectors and styles.
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. |