A price, formatted by the locale's own rules: cents hide on whole amounts, the currency symbol and cents can sit smaller and raised, and a short period follows the number. When the amount changes, as on a monthly to yearly switch, each digit rolls the way the price moved. An optional old price is struck through beside a computed "Save 20%" chip, a zero reads as "Free", and the whole price is spelled out for screen readers. Three tones for the chip and three sizes.
The import and the props worth knowing about, in one place.
import { PriceTag } from "@/components/beste/component/price-tag";
<PriceTag amount={29} period="/mo" periodLabel="per month" />
// A yearly switch: the digits roll to the new amount
<PriceTag amount={yearly ? 290 : 29} period={yearly ? "/yr" : "/mo"} />
<PriceTag
amount={24}
compareAt={30} // struck through, with a "Save 20%" chip
currency="EUR"
locale="de-DE"
symbol="raised" // "inline" (default) | "raised"
cents="raised"
tone="outline" // "muted" (default) | "outline" | "ghost"
size="lg" // "sm" | "default" | "lg"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
amount* | number | — | The price, in major units (29.5 is $29.50). |
currency | string | — | ISO 4217 code, e.g. "USD", "EUR". |
locale | string | — | Formatting locale; the reader's own when omitted. |
fractionDigits | "auto" | number | — | "auto" hides the cents on whole amounts; a number always shows that many. |
period | string | — | Short suffix after the amount, e.g. "/mo". |
periodLabel | string | — | How the period is read aloud, e.g. "per month". Falls back to `period`. |
compareAt | number | — | The old price, struck through beside the current one. |
showSavings | boolean | — | Show a "Save 20%" chip when `compareAt` is higher than `amount`. |
savingsLabel | string | — | Template for the chip; `{percent}` is replaced by the saving. |
freeLabel | string | null | — | Shown instead of the number when `amount` is 0. Pass null to print the zero. |
symbol | "inline" | "raised" | — | Currency symbol beside the digits, or smaller and raised. |
cents | "inline" | "raised" | — | Cents beside the digits, or smaller and raised. |
tone | "muted" | "outline" | "ghost" | — | |
size | "sm" | "default" | "lg" | — | |
className | string | — |