Use to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. User understanding increase when paired with labels.
Cents is automatically ".00" unless other wise overwritten (i.e. unit prop).
import React from 'react' import Currency from '../_currency' const CurrencyVariants = (props) => { return ( <> <Currency amount="2,000.50" emphasized={false} label="Emphasized False" marginBottom="md" size="sm" {...props} /> <Currency amount="342" label="Light" marginBottom="md" size="sm" symbol="€" variant="light" {...props} /> <Currency amount="45" label="Bold" size="sm" unit="/mo" variant="bold" {...props} /> </> ) } export default CurrencyVariants
import React from 'react' import Currency from '../_currency' const CurrencySize = (props) => { return ( <> <Currency amount="2,000.50" label="Small" marginBottom="md" size="sm" {...props} /> <Currency amount="342" label="Medium" marginBottom="md" size="md" symbol="€" {...props} /> <Currency amount="45" label="Large" size="lg" unit="/mo" {...props} /> </> ) } export default CurrencySize
import React from 'react' import Currency from '../_currency' const CurrencyAlignment = (props) => { return ( <> <Currency amount="2,000.50" label="Left" size="sm" {...props} /> <Currency align="center" amount="342" label="Center" size="sm" symbol="€" {...props} /> <Currency align="right" amount="45" label="Right" size="sm" unit="/mo" {...props} /> </> ) } export default CurrencyAlignment
import React from 'react' import Currency from '../_currency' const CurrencyNoSymbol = (props) => { return ( <Currency amount="309" label="Sales" size="md" symbol="" unit="/week" {...props} /> ) } export default CurrencyNoSymbol
import React from 'react' import Currency from '../_currency' const CurrencyAbbreviated = (props) => { return ( <> <Currency abbreviate amount="2,500" label="Thousands (with Unit)" marginBottom="md" size="md" unit="/mo" {...props} /> <Currency abbreviate amount="45300000" label="Millions" marginBottom="md" size="md" {...props} /> <Currency abbreviate amount="6,700,000,000" label="Billions" marginBottom="md" size="md" {...props} /> <Currency abbreviate amount="9,900,000,000,000" label="Trillions" size="md" {...props} /> </> ) } export default CurrencyAbbreviated
import React from 'react' import Currency from '../_currency' const CurrencyMatchingDecimals = (props) => { return ( <> <Currency amount="372.12" decimals="matching" label="Small" marginBottom="md" size="sm" unit="/day" {...props} /> <Currency amount="30,327.43" decimals="matching" label="Medium" marginBottom="md" size="md" symbol="€" {...props} /> <Currency amount="621,953.99" decimals="matching" label="Large" size="lg" {...props} /> </> ) } export default CurrencyMatchingDecimals