Price
v0.1.0DraftFormatted US dollars from an integer amount of cents, rendered in a data element with a plain decimal value, in three sizes.
Formatted US dollars from an integer amount of cents, rendered in a data element with a plain decimal value, in three sizes.
Usage
The ```jsx block above runs live on the docs site. Imports are stripped and every registry export is in scope, so you can compose with other components too.
Examples
Open all 3 →Properties
Price props
| Prop | Type | Default | Description |
|---|---|---|---|
amountCents* | number | — | The amount in cents, as an integer; other values are rounded |
className | string | — | Additional class names to merge with the component root element |
currency | "USD" | USD | The currency code; only USD is supported, so it defaults to USD until a second currency is added |
locale | string | en-US | BCP 47 locale the amount is formatted in; defaults to en-US so the server render and hydration match |
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, …).