Currency

Use this kit to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. Pairing it with labels improves user understanding.
Cents are automatically ".00" unless otherwise overwritten (i.e. unit prop).

Variants

NOTE: The value passed into the amount prop can be either a string or numeric value.

import React from 'react'

import { Currency } from 'playbook-ui'

const CurrencyVariants = (props) => {
  return (
    <>
      <Currency
          amount="30,327.43"
          label="Default"
          marginBottom="md"
          size="sm"
      />
      <Currency
          amount="2,000.50"
          emphasized={false}
          label="Emphasized False"
          marginBottom="md"
          size="sm"
      />
      <Currency
          amount={342}
          label="Light"
          marginBottom="md"
          size="sm"
          symbol="€"
          variant="light"
      />
      <Currency
          amount="45"
          label="Bold"
          size="sm"
          unit="/mo"
          variant="bold"
      />
    </>
  )
}

export default CurrencyVariants

Size

import React from 'react'

import { Currency } from 'playbook-ui'

const CurrencySize = (props) => {
  return (
    <>
      <Currency
          amount="2,000.50"
          label="Small"
          marginBottom="md"
          size="sm"
      />
      <Currency
          amount="342"
          label="Medium"
          marginBottom="md"
          size="md"
          symbol="€"
      />
      <Currency
          amount="45"
          label="Large"
          size="lg"
          unit="/mo"
      />
    </>
  )
}

export default CurrencySize

Alignment

import React from 'react'

import { Currency } from 'playbook-ui'

const CurrencyAlignment = (props) => {
  return (
    <>
      <Currency
          amount="2,000.50"
          label="Left"
          size="sm"
      />
      <Currency
          align="center"
          amount="342"
          label="Center"
          size="sm"
          symbol="€"
      />
      <Currency
          align="right"
          amount="45"
          label="Right"
          size="sm"
          unit="/mo"
      />
    </>
  )
}

export default CurrencyAlignment

No Symbol

Remove the "$" symbol by setting an empty string: symbol="".

import React from 'react'

import { Currency } from 'playbook-ui'

const CurrencyNoSymbol = (props) => {
  return (
    <Currency
        amount="309"
        label="Sales"
        size="md"
        symbol=""
        unit="/week"
    />
  )
}

export default CurrencyNoSymbol

Abbreviate Larger Amounts

Abbreviate larger amounts into thousands (K), millions (M), billions (B), and even trillions (T).

import React from 'react'

import { Currency } from 'playbook-ui'

const CurrencyAbbreviated = (props) => {
  return (
    <>
      <Currency
          abbreviate
          amount="2,500"
          label="Thousands (with Unit)"
          marginBottom="md"
          size="md"
          unit="/mo"
      />
      <Currency
          abbreviate
          amount="45300000"
          label="Millions"
          marginBottom="md"
          size="md"
      />
      <Currency
          abbreviate
          amount="6,700,000,000"
          label="Billions"
          marginBottom="md"
          size="md"
      />
      <Currency
          abbreviate
          amount="9,900,000,000,000"
          label="Trillions"
          size="md"
      />
    </>
  )
}

export default CurrencyAbbreviated

Matching Decimals

Use decimals="matching" when you want the full decimal amount displayed as a single number rather than split visually.

import React from 'react'

import { Currency } from 'playbook-ui'

const CurrencyMatchingDecimals = (props) => {
  return (
    <>
      <Currency
          amount="372.12"
          decimals="matching"
          label="Small"
          marginBottom="md"
          size="sm"
          unit="/day"
      />
      <Currency
          amount="30,327.43"
          decimals="matching"
          label="Medium"
          marginBottom="md"
          size="md"
          symbol="€"
      />
      <Currency
          amount="621,953.99"
          decimals="matching"
          label="Large"
          size="lg"
      />
    </>
  )
}

export default CurrencyMatchingDecimals

Unstyled

For alternative typography styles, you can pass a boolean prop called unstyled to the Currency kit and wrap it in any of our typography kits (Title, Body, Caption, etc.). This will allow the Currency kit to inherit any of our typography styles.

import React from 'react'

import { Currency, Title } from 'playbook-ui'

const CurrencyUnstyled = (props) => {
  return (
    <>
      <Currency
          amount="2,000.50"
          label="Basic unstyled example"
          marginBottom="md"
          unstyled
      />

      <Title
          size={1}
      >
        <Currency
            amount="2,000.50"
            label="Example with wrapping typography kit"
            unstyled
        />
      </Title>
    </>
  )
}

export default CurrencyUnstyled

Comma Separator

The optional commaSeparator can be used to auto-format the use of commas as a thousands separator.

NOTE: If the value passed into the amount prop is already comma-dilineated, it will not add additional commas.

import React from "react"

import { Currency } from 'playbook-ui'

const CurrencyCommaSeparator = (props) => {
  return (
    <Currency
        amount='1234567.89'
        commaSeparator
        decimals="matching"
        emphasized={false}
        size="lg"
    />
  )
}

export default CurrencyCommaSeparator

Negative

Small Currency kits have the negative sign on the lefthand side of the "$" symbol.

import React from 'react'

import { Currency } from 'playbook-ui'

const CurrencyNegative = (props) => {
  return (
    <>
      <Currency
          amount="-2,000.50"
      />
      <Currency
          amount="-2,000.50"
          size="md"
      />
      <Currency
          amount="-2,000.50"
          size="lg"
      />
    </>
  )
}

export default CurrencyNegative

Null Display

To customize how the amount field appears when it is empty, use the nullDisplay prop and set it to the desired value you want to display.

import React from 'react'

import { Currency } from 'playbook-ui'

const CurrencyNullDisplay = (props) => {
  return (
    <>
      <Currency
          amount=""
          label="Null"
          marginBottom="md"
          nullDisplay="--"
      />

      <Currency
          amount=""
          label="Null"
          marginBottom="md"
          nullDisplay="$0.00"
      />
    
      <Currency
          amount=""
          label="Null"
          marginBottom="md"
          nullDisplay=" "
      />
    </>
  )
}

export default CurrencyNullDisplay

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Github

Connect Chat