Bitcoin Value

Example

Import

JavaScript

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

React

import { BuiBitcoinValueReact as BuiBitcoinValue } from '@sbddesign/bui-ui/react'

Usage

JavaScript

<bui-bitcoin-value amount="1000"></bui-bitcoin-value>

React

<BuiBitcoinValue amount="1000"></BuiBitcoinValue>

Properties

Property	Attribute	Type	Required	Reflected	Description
format	format	string	No	Yes	Bitcoin format: “sats”, “BTC”, “bip177”
truncated	truncated	boolean	No	Yes	Whether to truncate large numbers
amount	amount	number	No	Yes	Bitcoin amount in satoshis
symbolPosition	symbol-position	string	No	Yes	Symbol position: “left”, “right”
satcomma	satcomma	boolean	No	Yes	Whether to use satcomma formatting
size	size	string	No	Yes	Money size: “small”, “default”, “large”, “xlarge”
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

Bitcoin Formats

• sats - Display in satoshis
• BTC - Display in Bitcoin (decimal format)
• bip177 - Display using BIP177 format

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

• Amount Conversion: The component automatically converts between satoshis and Bitcoin based on the format
• Truncation: When truncated 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 Bitcoin 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

Events

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