Skip to main content

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 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

Loading...
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

Loading...
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.

Didn't find your answers? Ask the Community. For documentation suggestions, submit your feedback.

JOIN THE COMMUNITY