Skip to main content

Price

Pattern
Live

The Price pattern provides consistent formatting for presenting numbers in currently format.

FigmaCode

Usage​

Price provides consistent formatting for displaying prices. It can be adapted to different font sizes and maintain consistent formatting.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Price } from "@iag/chroma-react-ui.components";

When to use​

Use Price when currency content needs to be displayed prominently.

When to avoid​

Avoid using Price for any content which doesn’t display in a currency format.

Do

  • Do change the sizing of Price using font sizes to retain the consistent hierarchical formatting.

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.