12.9.1

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

Variants

Emphasized False
$

2,000

.50
Light

342

.00
Bold
$

45

/mo

Size

Small
$

2,000

.50
Medium

342

.00
Large
$

45

/mo

Alignment

Left
$

2,000

.50
Center

342

.00
Right
$

45

/mo

No Symbol

Sales

309

/week

Abbreviate Larger Amounts

Thousands (with Unit)
$

2.2

K/mo
Millions
$

3.42

M
Billions
$

45.3

B
Trillions
$

983

T

Matching Decimals

Small
$

372.12

/day
Medium

30,327.43

Large
$

621,953.99



UI Samples using Currency Kit

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

Available Props

  • classname
  • dark
  • margin
  • margin_bottom
  • margin_left
  • margin_right
  • margin_top
  • margin_x
  • margin_y
  • max_width
  • padding
  • padding_bottom
  • padding_left
  • padding_right
  • padding_top
  • padding_x
  • padding_y
  • z_index
  • number_spacing
  • shadow
  • line_height
  • display
  • cursor
  • flex_direction
  • flex_wrap
  • justify_content
  • justify_self
  • align_items
  • align_content
  • align_self
  • flex
  • flex_grow
  • flex_shrink
  • order
  • id
  • data
  • aria
  • children
  • align
  • size
  • label
  • symbol
  • amount
  • unit
  • emphasized
  • variant
  • abbreviate
  • decimals