Price
Pattern
Live
The Price pattern provides consistent formatting for presenting numbers in currently format.
- Usage
- Examples
- Properties
- Accessibility
- CSS Variables
Usage
Price provides consistent formatting for displaying prices and enables assistive technologies to read them accurately. It comes in a default and small variant to allow the optimal size to be chosen for the context.
Installation
Install
yarn add @iag/chroma-react-ui.components
Import
import { Price } from "@iag/chroma-react-ui.components";
When to use
Use Price for displaying numbers in a currency format.
When to avoid
Avoid using Price for numbers that are not in a currency format.
Do
- Select the appropriate variant for the context.
Don't
- Don't override the pre-set formatting, this will break the consistent visual presentation and remove any it’s ability to be responsive at different viewports.
Variants
There are 2 Price variants:
- Default: use for displaying a single price as the primary point of focus. For example, when a single quote or premium price is displayed.
- Small: use for displaying multiple prices or where space is limited. For example, when displaying multiple policy renewal prices.