Documentation
Feedback
Guides

Deprecated
Discount Badge

{"base64":"  ","img":{"width":73,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":927,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-discountbadge-0.png"}}

Warning

Discount Badge is a VTEX component that shows a discount of a product. This component can be imported and used by any VTEX App.

Usage

You should follow the usage instruction in the main README.

To import it into your code:

import { DiscountBadge } from 'vtex.store-components'

You can use it in your code like a React component with the jsx tag: <DiscountBadge />.

<DiscountBadge listPrice={commertialOffer.ListPrice} sellingPrice={commertialOffer.Price} label={badgeText}> <img src="https://raw.githubusercontent.com/vtexdocs/dev-portal-content/main/docs/vtex-io/Store Framework Apps/deprecated/" alt=""> </DiscountBadge>

Configuration

Prop nameTypeDescription
listPriceNumber!Product's default price
sellingPriceNumber!Product's price with discount
labelStringLabel to track the discount percent
childrenNode!Element where the badge is displayed

Styles API

This app provides some CSS classes as an API for style customization. You should follow the Styles API instruction in the main README.

CSS namespaces

Below, we describe the namespaces that are defined in the DiscountBadge.

Class nameDescriptionComponent Source
discountContainerThe discount containerindex
discountInsideContainerThe discount inner containerindex
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page