Price
Localized money display for regular and discounted pricing. Handles strike-through originals, sale highlighting, and optional discount badges without repeating formatting logic throughout the storefront.
Best for
Import
import { Price } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use Price anywhere money formatting needs to stay consistent across locales, currencies, and sale states. It keeps product cards, cart rows, and order summaries from each re-implementing the same formatting and discount logic.
Sale behavior
If both amount and original are present, the component can communicate discount state without extra formatting work in the calling surface. showDiscountBadge and colorSalePrice let you tune that presentation for denser contexts like search results or quieter contexts like order review.
Commerce guidance
Price is intentionally narrow. Keep tax messaging, financing copy, and delivery disclaimers outside the component so the money display stays portable.
When a surface needs extra commercial context, compose those labels around Price instead of turning it into a full merchandising block.
Examples
Live examples you can edit directly in the sandbox.
Regular and sale pricing
Side-by-side comparison of a regular price, a sale price with badge, and a sale price without badge.
Sale display options
Use colorSalePrice and locale to adapt the sale presentation across different brand and market contexts.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| amount | number | — | The current (sale) price amount in major currency units (e.g. 129, not cents) |
| currency | string | SEK | ISO 4217 currency code used for formatting |
| original | number | — | Original price before discount; when provided, enables sale display |
| discountPercent | number | — | Explicit discount percentage to show in the badge; calculated from amount/original when omitted |
| locale | string | — | BCP 47 locale string for number formatting; falls back to locale context when omitted |
| className | string | No description yet. | |
| showDiscountBadge | boolean | true | Show the -X% discount badge next to the sale price |
| colorSalePrice | boolean | true | Apply a colored background highlight to the sale price |