TotalBalance

Aggregate balance display with quick action buttons (receive, send, convert).

Open in Storybook

Interactive Demo

Your total balance

USD 12,345.67

Hide Balance

Usage

<script setup>
import { TotalBalance } from '@yellowcard/b2b-design-system';
</script>

<template>
  <TotalBalance
    :balance="12345.67"
    currency="USD"
    balanceLabel="Your total balance"
    :canReceive="true"
    :canSend="true"
    :canConvert="true"
  />
</template>

API Reference

Props

Prop	Type	Default	Description
balance	number	0	Total balance amount
currency	string	'USD'	Currency code
balanceLabel	string	'Your total balance'	Balance label
hideBalance	boolean	false	Hide balance value
lowBalance	boolean	false	Low balance indicator
isMobile	boolean	false	Mobile layout
canReceive	boolean	true	Show receive action
canSend	boolean	false	Show send action
canConvert	boolean	false	Show convert action
receiveLabel	string	'Receive'	Receive button label
sendLabel	string	'Send'	Send button label
convertLabel	string	'Convert'	Convert button label