ttolbel UI

Component

Currency badge

A circular ticker badge color-matched to common currencies, falling back to a neutral tone and the first letters of the code for anything unrecognized.

The primitive

USD
USD
EUR
EUR
GBP
GBP
currency badge.tsx
<NativeCurrencyBadge currency="USD" size="md" showLabel />

Example

The leading icon in an account row, identifying which currency that balance is denominated in before the number is even read.

USD

USD account

$4,280.00
currency-badge-example.tsx
<NativeRow icon={<NativeCurrencyBadge currency="USD" size="sm" />} label="USD account" right="$4,280.00" />

Capabilities

PropTypeDescription
currencyrequiredstring
iconReact.ReactNodeOptional icon/image — if omitted, shows first 3 chars of currency code
sizeNativeCurrencyBadgeSize
showLabelbooleanShow the currency label next to the badge
classNamestring