DiscountBadge
A custom Badge that display product's discounts.
Overview​
Loading...
Import​
Import the component from @faststore/ui
import { DiscountBadge } from '@faststore/ui'
Import Styles
import '@faststore/ui/src/components/molecules/DiscountBadge/styles.scss'
Usage​
Loading...
Props​
Design Tokens​
This component inherits Badge design tokens.
Variants​
Low Discount​
Loading...
| 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​
Loading...
| 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​
Loading...
| 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.