Documentation
Feedback
Guides
Storefront Development

Storefront Development
Price

Prices are used to display the price of a given product, discount and total values.

Prices are used to display the price of a given product, discount and total values.

Overview

Example
Code
62.562.562.562.562.5

Import

Import the component from @faststore/ui

_10
import { Price } 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:

_10
@import '@faststore/ui/src/components/atoms/Price/styles.scss';

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage

62.5

_10
<Price value={62.5} />


Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-price
as"symbol" | "object" | "title" | "slot" | "animate" | "style" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | ComponentClass<any, any> | FunctionComponent<any>Set the HTML element tag of this component.
value*numberThe raw price value.
formatterPriceFormatterFormatter function that transforms the raw price value and render the result.(price) => price
variant"selling" | "listing" | "spot" | "savings" | "installment"The current use case variant for prices.selling
SRTextstringText for the screen readers only

Design Tokens

Local tokenDefault value/Global token linked
--fs-price-listing-color
var(--fs-color-text-light)
--fs-price-listing-text-decorationline-through
--fs-price-spot-font-weightvar(--fs-text-weight-bold)
--fs-price-spot-color
var(--fs-color-text)

Variants

Installment

62.5

_10
<Price value={62.5} variant="installment" />

Listing

62.5

_10
<Price value={62.5} variant="listing" />

Savings

62.5

_10
<Price value={62.5} variant="savings" />

Selling

62.5

_10
<Price value={62.5} variant="selling" />

Spot

62.5

_10
<Price value={62.5} variant="spot" />


Customization

For further customization, you can use the following data attributes:
data-fs-price
data-fs-price-variant="selling| 'listing' | 'spot' | 'savings'| 'installment"

Examples

INTL Formatted to parts

$62.50

_28
<Price
_28
formatter={function useIntlPartsFormatter(price) {
_28
return useMemo(() => {
_28
return new Intl.NumberFormat('en-US', {
_28
style: 'currency',
_28
currency: 'USD',
_28
})
_28
.formatToParts(price)
_28
.map((part) => {
_28
const props = {
_28
[`data-fs-price-${part.type}`]: true,
_28
}
_28
_28
if (part.type === 'integer') {
_28
props.style = { fontWeight: 700 }
_28
}
_28
_28
return (
_28
<span key={part.type} {...props}>
_28
{part.value}
_28
</span>
_28
)
_28
})
_28
})
_28
}}
_28
value={62.5}
_28
variant="selling"
_28
/>

INTL Formatted

€62.50

_14
<Price
_14
formatter={function useIntlFormatter(price) {
_14
return useMemo(() => {
_14
const formattedPrice = new Intl.NumberFormat('en-GB', {
_14
style: 'currency',
_14
currency: 'EUR',
_14
}).format(price)
_14
_14
return formattedPrice
_14
})
_14
}}
_14
value={62.5}
_14
variant="savings"
_14
/>

Custom

62,5 reais

_10
<Price
_10
formatter={function customFormatter(price) {
_10
const unformattedPrice = `${price}`
_10
const formattedPrice = `${unformattedPrice.replace('.', ',')} reais`
_10
return formattedPrice
_10
}}
_10
value={62.5}
_10
variant="spot"
_10
/>


Formatter Function Example


_10
function customFormatter(price: number) {
_10
const unformattedPrice = `${price}`
_10
const formattedPrice = `${unformattedPrice.replace('.', ',')} reais`
_10
_10
return formattedPrice
_10
}

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