Standardises the way prices are displayed.
Takes an input in pence and outputs it into the correct price format, prepends a pound symbol and adds an optional minus sign for negative prices.
Only works for pound sterling.
Use for all price values
Use negative letter spacing as this reduces legibility
Avoid using the showDecimal option
Use for currencies other than pound sterling
Use decimal pence values
Try to avoid using the showDecimal option - adding extra zeros can make values appear larger than they actually are.
Why pence? Passing values in pence gives the component complete control of the output format. If a new best practice should arise then consumers of the component will not need to make modifications.
pence="0" then the outputted price will not have the minus symbol. i.e. "£0"
Prices of £10000 and higher will include commas. i.e. "£10000" becomes "£10,000" and "£1000000" becomes "£1,000,000". Values of less than £10,000 will not have commas as it can make numbers appear larger than they actually are.
Prices of less than £1 include zero pounds. eg.
pence="1" becomes "£0.01"
To see examples visit Storybook
Does it live in a panel?
Does it live inside other components?
What layout classes can be used?
The value in pence that is to be displayed
Set true to show ".00" when there are whole pound values
Set true to show a minus symbol at the start of the number
Price is passed in as an attribute to prevent the unformatted price being crawled by Google and subsequently displaying the wrong price in search results.
There are a number of characters (i.e. hyphen, em dash, en dash) that can be confused with the minus symbol. Setting the negative attribute to true allows the component to output output the correct symbol. This ensures that screen readers will read the value as a minus price.
Do you have insights or concerns to share? You can raise an issue via Github bugs.
See all the issues already raised via Github issues.
💩 🎉 🦄 You can also contact the team on Slack on the