Money Value

Example

Import

JavaScript

import '@sbddesign/bui-ui/money-value.js'

React

import { BuiMoneyValueReact as BuiMoneyValue } from '@sbddesign/bui-ui/react'

Usage

JavaScript

<bui-money-value amount="100" symbol="$"></bui-money-value>

React

<BuiMoneyValue amount="1000" symbol="$"></BuiMoneyValue>

Properties

Property	Attribute	Type	Required	Reflected	Description
symbolPosition	symbol-position	string	No	Yes	Symbol position: “left”, “right”
symbol	symbol	string	No	Yes	Currency symbol to display
amount	amount	number	No	Yes	Money amount to display
truncation	truncation	boolean	No	Yes	Whether to truncate large numbers
size	size	string	No	Yes	Money size: “small”, “default”, “large”, “xlarge”
satcomma	satcomma	boolean	No	Yes	Whether to use satcomma formatting
showEstimate	show-estimate	boolean	No	Yes	Whether to show estimate text
textSize	text-size	string	No	Yes	Text size: “base”, “lg”, “xl”, “2xl”, “3xl”, “4xl”, “5xl”, “6xl”, “7xl”, “8xl”, “9xl”

Valid Values

Symbol Positions

• left - Symbol appears before the amount
• right - Symbol appears after the amount

Money Sizes

• small - Small money display
• default - Standard money display
• large - Large money display
• xlarge - Extra large money display

Text Sizes

• base - Base text size
• lg - Large text
• xl - Extra large text
• 2xl - 2x large text
• 3xl - 3x large text
• 4xl - 4x large text
• 5xl - 5x large text
• 6xl - 6x large text
• 7xl - 7x large text
• 8xl - 8x large text
• 9xl - 9x large text

Behavior

• Generic Money Display: This component is designed for displaying any currency, not just Bitcoin
• Symbol Customization: The symbol property allows you to set any currency symbol (e.g., ”$”, ”€”, ”¥”, ”₿”)
• Truncation: When truncation is true, large numbers are shortened (e.g., 1,000,000 → 1M)
• Satcomma Formatting: When satcomma is true, uses satcomma notation for better readability
• Symbol Positioning: Controls whether the currency symbol appears before or after the amount
• Size Responsiveness: The size property controls the overall visual size of the money display
• Text Scaling: The textSize property allows fine-grained control over text size
• Estimate Display: The showEstimate property can display additional context text

Events

The money value component does not emit custom events. It behaves as a standard HTML element for displaying monetary amounts.