🎉 We are thrilled to introduce FastStore v2. If you are looking for documentation of the previous version of FastStore, please refer to FastStore v1.

Price

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

Overview

Import

Import the component from @faststore/ui

import { Price } from '@faststore/ui'

Import Styles

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

Usage

62.5
<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" | "center" | "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" | "search" | "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
<Price value={62.5} variant="installment" />

Listing

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

Savings

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

Selling

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

Spot

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

INTL Formatted

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

Custom

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

Formatter Function Example

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