Balance Card

@velon-finance/ui · status: stable · organism · domain

Card de destaque para as páginas Wallet / Home / Dashboard. Combina o cabeçalho com o gradiente oficial da superfície do card (navy para azul profundo, fixo nos temas claro e escuro conforme VELON Manual da Marca v1.0 §6.2) com um MoneyAmount e uma linha de ações opcional.

Visão geral

Available balance

$12,847.23

Updated 2 minutes ago

Apenas o cabeçalho

Total custody

R$ 4.321,50

Saldo bloqueado em D+1

Com Buttons no lugar de QuickActionButtons

Saldo USD

$1,000.00

Code

import { BalanceCard, QuickActionButton } from '@velon-finance/ui'
import { ArrowUp, ArrowDown } from 'lucide-react'
 
<BalanceCard
  title="Available balance"
  amount={merchant.balance}
  currency="USD"
  subtitle={`Updated ${formatRelative(merchant.updatedAt)}`}
  hideable
  actions={
    <>
      <QuickActionButton icon={<ArrowUp />} label="Send" onClick={openSend} />
      <QuickActionButton icon={<ArrowDown />} label="Receive" onClick={openReceive} />
    </>
  }
/>

Select Visão geral