Price

Use Price to display the cost of an item or service. It formats the amount for the given currency and locale, and supports size, weight, strikethrough, and sale styling.

Import

import { Price } from '/@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
amount	number	No	The price amount to format. Defaults to 0.
currency	string | null	No	The currency code used to format the amount (for example, USD).
locale	string	No	The locale used to format the amount (for example, en-US).
formatOptions	{ [key: string]: any }	No	Number-formatting options passed to the price formatter. Defaults to an empty object.
variant	'default' | 'strikethrough'	No	The display variant. Defaults to default.
weight	'bold' | 'normal'	No	The font weight. Defaults to bold.
sale	boolean	No	Apply sale styling. Defaults to false.
size	'small' | 'medium' | 'large'	No	The price size. Defaults to small.

Price also accepts standard HTML attributes (for example, className), except size.

Example

Render a formatted price for a given currency and locale.

import { Price, provider } from '/@dropins/tools/components.js';

await provider.render(Price, {
  amount: 9.99,
  currency: 'USD',
  locale: 'en-US',
})(document.querySelector('.price'));

Related

• PriceRange — display a minimum-to-maximum price range.
• Design tokens — the typography and color scales prices use.