ttolbel UI

Component

Currency badge

A circular ticker badge color-matched to common currencies, falling back to a neutral tone and an abbreviated ticker up to four characters for anything unrecognized.

Standalone

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

Example

The leading icon in a list row, identifying which currency applies before the value is 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-