Price Tag
v0.0.0A formatted price with an optional "was" price and the percentage saved. Formatting goes through `Intl.NumberFormat`, so symbols, decimals and grouping follow the locale and currency instead of being hand-rolled.
A formatted price with an optional "was" price and the percentage saved.
Formatting goes through Intl.NumberFormat, so symbols, decimals and grouping
follow the locale and currency instead of being hand-rolled.
Usage
Discounts
Pass compareAt with the previous price. It renders struck through, and the
saving is computed and shown as a percentage.
Currency and locale
Sizes
Compositions
Open all 5 →Properties
PriceTag props
| Prop | Type | Default | Description |
|---|---|---|---|
amount* | number | — | The price to show, in major units (e.g. 19.99) |
className | string | — | Additional class names to merge with the component root element |
compareAt | number | — | The previous price, when `amount` is a discount — rendered struck through with the saving |
currency | string | USD | ISO 4217 currency code; defaults to USD |
locale | string | — | BCP 47 locale used for formatting; defaults to the browser's, then en-US |
size | "sm" | "md" | "lg" | md | Controls the type size; defaults to md |
Also accepts the native attributes of its root element (className, aria-*, event handlers, …).