BalanceCard

Balance display wrapped in a styled card container with currency icon.

Open in Storybook

Interactive Demo

u

USD 5,000.00

US dollar balance

NGN 1,250,000.00

Nigerian naira balance

Hide Balance

Usage

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

<template>
  <BalanceCard
    currency="BTC"
    :balance="0.5432"
    description="Bitcoin balance"
    assetIcon="BTC"
  />
</template>

API Reference

Props

Prop	Type	Default	Description
currency	string	'USD'	Currency code
balance	number	0	Balance amount
description	string	'US dollar balance'	Card description text
assetIcon	string	'USD'	Currency icon code
isPrimary	boolean	false	Primary card styling
hideBalance	boolean	false	Hide the balance value