Balance

Displays a currency balance with visibility toggle and low-balance indicator.

Open in Storybook

Interactive Demo

Your total balance

NGN 1,250,000.00

Hide Balance Low Balance

Variants

Different currencies

USD Balance

USD 5,000.00

BTC Balance

BTC 0.4521

NGN Balance

Low balance

NGN 250,000.00

Usage

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

<template>
  <Balance :balance="1250000" currency="NGN" label="Your total balance" />
</template>

API Reference

Props

Prop	Type	Default	Description
balance	number	0	Balance amount
currency	string	'USD'	Currency code
label	string	'Your total balance'	Balance label text
hideBalance	boolean	false	Hide the balance value
lowBalance	boolean	false	Show low balance indicator
ariaLabel	string	'Account balance display'	Accessible label