Price

An amount, formatted for the locale, with each part in its own [data-part] span (currency, integer, group, decimal, fraction, …) so a brand styles one part — a small raised fraction, say — in CSS. Screen readers get the whole amount as one string rather than its pieces.

import { Price } from "@evolve-storefront/commerce-ui/price";

Renders inside AddressConfigProvider.

Preview

DefaultOpen in Storybook ↗

Usage

<Price money={variant.price.gross} locale={locale} />;

Props

Prop	Type	Description
money	Money | null | undefined	Renders nothing when absent, so a missing price leaves no empty element.
locale	string	The active locale; it decides the separators and where the currency goes.

Any other props go to the root element, like on a plain HTML element.