Currency

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).

See this kit in action in our sample UI

Size

VStack(alignment: .leading, spacing: Spacing.small) {
  PBCurrency(
    amount: "2,000",
    decimalAmount: ".50",
    label: "small",
    size: .title4,
    symbol: "en_US",
    isEmphasized: true
  )
  PBCurrency(
    amount: "342",
    decimalAmount: ".00",
    label: "medium",
    size: .title3,
    symbol: "en_EU",
    isEmphasized: true
  )
  PBCurrency(
    amount: "45",
    label: "large",
    size: .title1,
    symbol: "en_US",
    unit: "/mo",
    isEmphasized: true,
    hasUnit: true
  )
}

Alignment

!Currency-Alignment

VStack(alignment: .leading, spacing: Spacing.small) {
  HStack {
    PBCurrency(
      amount: "2,000",
      decimalAmount: ".50",
      label: "left",
      size: .title4,
      symbol: "en_US",
      isEmphasized: true,
      alignment: .leading
    )
  }
  .frame(maxWidth: .infinity, alignment: .leading)
  HStack {
    PBCurrency(
      amount: "342",
      decimalAmount: ".00",
      label: "center",
      size: .title4,
      symbol: "en_EU",
      isEmphasized: true,
      alignment: .center
    )
  }
  .frame(maxWidth: .infinity, alignment: .center)
  HStack {
    PBCurrency(
      amount: "45",
      label: "right",
      size: .title4,
      symbol: "en_US",
      unit: "/mo",
      isEmphasized: true,
      hasUnit: true,
      alignment: .trailing
    )
  }
  .frame(maxWidth: .infinity, alignment: .trailing)
}

Props

Name	Type	Description	Default	Values
amount	`String`	Allows user to enter a currency amount
decimalAmount	`String`	Allows user to enter a decimal amount
label	`String`	Allows user to a descriptive label value
size	`PBFont`	Allows user to choose the size of the amount that is being displayed	`.title4`	`title4` `title3` `title4`
symbol	`String`	A string value used to produce the desired currency symbol
unit	`String`	Allows user to add a unit of measure instead of a decimal amount
alignment	`Alignment`	Sets alignment of content	`.leading`	`leading` `center` `trailing`
isEmphasized	`Bool`	Determines whether or not the currency that is being displayed is emphasized	`false`	`true` `false`
hasUnit	`Bool`	Determines whether or not the currency has a decimal value or a unit of measure	`false`	`true` `false`

UI Samples using Currency Kit

Get the full picture. See how this kit is used in our samples.

Crm Client List

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

Dribbble

Github

Connect Chat