Available from v8.0.0
BB.AmountText
BB.AmountText is a SwiftUI view that displays formatted currency amounts with customizable styling and accessibility support.
Platform availability: iOS 17.0+
When to use:
- Use BB.AmountText when displaying monetary values such as account balances, transaction amounts, or totals with proper currency formatting.
- Consider BB.InputAmount when you need to collect monetary input from users rather than display values.
Import
import BackbaseDesignSystem
Visual reference
|
|
|
|
|
|
|
API reference
BB.AmountText
A view that displays monetary values with consistent formatting. The component supports currency formatting, sign highlighting for positive and negative amounts, and comprehensive accessibility features. The component automatically formats amounts according to the specified currency code and locale settings.
Initializers
init(amount:currencyCode:formattingOptions:accessibilityOptions:)
Creates a new amount text view with the specified amount and formatting options.
|
Parameter |
Type |
Description |
|---|---|---|
|
amount |
Decimal |
The decimal amount to display |
|
currencyCode |
String? |
The ISO currency code (e.g., "USD", "EUR"). If nil, uses the device's default currency |
|
formattingOptions |
DesignSystem.Formatting.Options |
Configuration options for how the amount should be formatted and displayed |
|
accessibilityOptions |
DesignSystem.Formatting.Options? |
Optional accessibility formatting options. If nil, uses the same options as formattingOptions |
Formatting options
The DesignSystem.Formatting.Options type configures amount display:
|
Method |
Description |
|---|---|
|
.enableSignHighlighting(Bool) |
Positive amounts appear in green, negative in red |
|
.showsPlusSign(Bool) |
Displays plus sign for positive amounts |
|
.customCode(String) |
Overrides the currency code display |
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
amount |
Decimal |
— |
|
currencyCode |
String? |
Device default |
|
formattingOptions |
DesignSystem.Formatting.Options |
— |
|
accessibilityOptions |
DesignSystem.Formatting.Options? |
nil |
amount
The amount property sets the decimal amount to display. This value is formatted according to the currency code and locale settings.
BB.AmountText(
amount: 1234.56,
currencyCode: "USD",
formattingOptions: .init()
)
currencyCode
The currencyCode property sets the ISO currency code for formatting. If nil, the device's default currency is used.
BB.AmountText(
amount: 99.99,
currencyCode: "EUR",
formattingOptions: .init()
)
formattingOptions
The formattingOptions property configures how the amount should be formatted and displayed, including sign highlighting and plus sign display.
BB.AmountText(
amount: 123.45,
currencyCode: "USD",
formattingOptions: .init()
.enableSignHighlighting(true)
.showsPlusSign(true)
)
accessibilityOptions
The accessibilityOptions property sets optional formatting options specifically for screen readers. If nil, uses the same options as formattingOptions.
BB.AmountText(
amount: 123.45,
currencyCode: "USD",
formattingOptions: .init().showsPlusSign(true),
accessibilityOptions: .init().showsPlusSign(false)
)
Usage
Basic usage
Display a formatted currency amount.
var body: some View {
BB.AmountText(
amount: 123.456,
currencyCode: "USD",
formattingOptions: .init()
)
}
With sign highlighting
Enable color highlighting for positive and negative amounts.
var body: some View {
VStack {
BB.AmountText(
amount: 123.456,
currencyCode: "USD",
formattingOptions: .init()
.enableSignHighlighting(true)
.showsPlusSign(true)
)
BB.AmountText(
amount: -123.456,
currencyCode: "USD",
formattingOptions: .init()
.enableSignHighlighting(true)
)
}
}
Custom currency code
Override the displayed currency code.
var body: some View {
BB.AmountText(
amount: 123.456,
currencyCode: "USD",
formattingOptions: .init()
.customCode("BTC")
)
}
With accessibility options
Provide different formatting for screen readers.
var body: some View {
BB.AmountText(
amount: 123.456,
currencyCode: "USD",
formattingOptions: .init()
.enableSignHighlighting(true)
.showsPlusSign(true),
accessibilityOptions: .init()
.showsPlusSign(false)
)
}
States and variants
Default
The default state displays the amount without sign highlighting.
Visual characteristics:
- Standard text color
- Currency symbol and formatted amount
- No sign indicator for positive amounts
BB.AmountText(
amount: 100.00,
currencyCode: "USD",
formattingOptions: .init()
)
Positive with highlighting
When sign highlighting is enabled, positive amounts appear in green.
Visual characteristics:
- Green text color
- Optional plus sign prefix
- Currency symbol and formatted amount
BB.AmountText(
amount: 100.00,
currencyCode: "USD",
formattingOptions: .init()
.enableSignHighlighting(true)
.showsPlusSign(true)
)
Negative with highlighting
When sign highlighting is enabled, negative amounts appear in red.
Visual characteristics:
- Red text color
- Minus sign prefix
- Currency symbol and formatted amount
BB.AmountText(
amount: -50.00,
currencyCode: "USD",
formattingOptions: .init()
.enableSignHighlighting(true)
)
Zero amount
Zero amounts display without sign highlighting regardless of settings.
Visual characteristics:
- Standard text color
- No sign indicator
- Currency symbol and "0.00" formatted
BB.AmountText(
amount: 0,
currencyCode: "USD",
formattingOptions: .init()
.enableSignHighlighting(true)
)
Customization
Formatting options
Customize the amount display using formatting options.
// Enable sign highlighting
let options = DesignSystem.Formatting.Options()
.enableSignHighlighting(true)
// Show plus sign for positive amounts
let options = DesignSystem.Formatting.Options()
.showsPlusSign(true)
// Custom currency code display
let options = DesignSystem.Formatting.Options()
.customCode("BTC")
// Combined options
let options = DesignSystem.Formatting.Options()
.enableSignHighlighting(true)
.showsPlusSign(true)
.customCode("BTC")
Typography
The component inherits typography from its parent context. Use SwiftUI font modifiers to customize.
BB.AmountText(
amount: 1234.56,
currencyCode: "USD",
formattingOptions: .init()
)
.font(.title)
Accessibility
This component can be configured with accessibility features at the integration level. Use the standard SwiftUI accessibility modifiers to ensure a fully accessible experience for all users.
Accessibility configuration
|
Modifier |
Description |
|---|---|
|
.accessibilityLabel(_:) |
Sets the accessibility label for screen readers |
|
.accessibilityHint(_:) |
Provides additional context for the action |
|
.accessibilityValue(_:) |
Sets the current value for the element |
Best practices
- Provide meaningful accessibility labels that describe the element's purpose.
- Use accessibility hints to provide additional context when needed.
- Ensure all interactive elements are accessible.
BB.AmountText()
.accessibilityLabel("Descriptive label")
.accessibilityHint("Additional context")
Dependencies
- External dependencies: None
- Internal dependencies: BackbaseDesignSystem
Design tokens
Component styling is applied automatically through the design system's theming infrastructure.
JSON tokens
This component uses semantic tokens only. See semantic tokens below.
Semantic tokens
|
Token |
API Reference |
Description |
|---|---|---|
|
Typography |
DesignSystem.shared.typography |
Typography style inherited from parent context |
|
Positive color |
Theme.colors.foreground.positive |
Color for positive amounts when sign highlighting is enabled |
|
Negative color |
Theme.colors.foreground.negative |
Color for negative amounts when sign highlighting is enabled |
|
Default color |
Theme.colors.foreground.default |
Default text color when sign highlighting is disabled |
|
Amount formatting |
DesignSystem.shared.formatting |
Formatting configuration for currency display |
See also
- BB.InputAmount - For currency amount input
- BB.TextField - For text input