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.
Example
Code
62.562.562.562.562.5
Usage
Import the component
_10import { Price } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/atoms/Price/styles.scss";
For details, see Importing FastStore UI component styles.
Examples
Variants
Installment
Example
Code
62.5
Listing
Example
Code
62.5
Savings
Example
Code
62.5
Selling
Example
Code
62.5
Spot
Example
Code
62.5
INTL Formatted to parts
Example
Code
$62.50
INTL Formatted
Example
Code
€62.50
Custom price formatter
Example
Code
62,5 reais
Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-price-listing-color | var(--fs-color-text-light) |
--fs-price-listing-text-decoration | line-through |
--fs-price-spot-font-weight | var(--fs-text-weight-bold) |
--fs-price-spot-color | var(--fs-color-text) |
Data attributes
You can target and override
Price styles using the following data attributes:data-fs-pricedata-fs-price-variant="selling| 'listing' | 'spot' | 'savings'| 'installment"Props
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID 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* | number | The raw price value. | |
| formatter | PriceFormatter | Formatter 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 |
| SRText | string | Text for the screen readers only |