Use for displaying formatted monetary amounts with proper locale.
amountThe amount you want formatted.
currencyFormats the amount to a specific currency.
localeFormats to the language provided. Accepts multiple locales in an array as sequential fallbacks.
signDisplaysign-displayDetermine how the positive or negative sign should display.
Behavior:
accounting: No sign displays for positive amounts and parentheses wrap negative amounts.always: Always display the sign.auto: Sign displays for negative amounts only, including negative zero.exceptZero: Sign displays for positive and negative amounts, but not zero.never: Never display the sign.sizeApplies styling based on the size provided. If no size is provided, it will display as inline text.
variantThe variant controls how the currency is colored and exposes unique CSS overrides.
The debit and credit variants align styling with common practices for coloring debit and credit accounts.
The masked variant exposes the ability to use gradients and images to color the currency.
The q2-currency element exposes methods that can be used to perform various actions on the component.
A method to retrieve the displayed currency value.
displayedMessageValue() => Promise<string>The variant property provides the developer with some built-in theming while still maintaining the ability to override colors for positive and negative amounts unique to each variant.
Debit:
<q2-currency amount="123456.78" size="small" variant="debit"></q2-currency>
<br/>
<q2-currency amount="-123456.78" size="small" variant="debit"></q2-currency>
**
Credit**
<q2-currency amount="123456.78" size="small" variant="credit"></q2-currency>
<br/>
<q2-currency amount="-123456.78" size="small" variant="credit"></q2-currency>
It also allows for more robust styling through the use of the "masked" variant. Below you can see examples of how the "masked" variant works:
Default:
<q2-currency amount="123456.78" size="large" variant="masked"></q2-currency>
Custom CSS Override:
<q2-currency
amount="-123456.78"
size="large"
variant="masked"
style="
--tct-currency-masked-negative-background: url(https://imgs.search.brave.com/oeWYCJH2X9sYStSyJZQc8-8Rm7BmbbBTQZTTSzCtvKk/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly90aHVt/YnMuZHJlYW1zdGlt/ZS5jb20vYi9tb3Jh/dmlhbi1yb2xsaW5n/LWxhbmRzY2FwZS10/cmVlcy1wYW5vcmFt/YS1saW5lcy1zcHJv/dXRzLW1vcmF2aWEt/Y3plY2gtcmVwdWJs/aWMtNTU1OTczMzAu/anBn)
center 210px / 150%;
"
></q2-currency>
The signDisplay provides better control over displaying the positive or negative sign with the amount. We support specific custom values and values used by the Intl.NumberFormat object for this property. Below you can see a couple notable values for signDisplay in action with positive and negative amounts:
Auto
<q2-currency amount="123456.78" size="small" sign-display="auto"></q2-currency>
<br/>
<q2-currency amount="-123456.78" size="small" sign-display="auto"></q2-currency>
**
Always**
<q2-currency amount="123456.78" size="small" sign-display="always"></q2-currency>
<br/>
<q2-currency amount="-123456.78" size="small" sign-display="always"></q2-currency>
**
Accounting**
<q2-currency amount="123456.78" size="small" sign-display="accounting"></q2-currency>
<br/>
<q2-currency amount="-123456.78" size="small" sign-display="accounting"></q2-currency>
Provide clean examples of how to compose multiple components together in order to achieve a specific visual outcome that is curated and maintained by Tecton.
How to build an Account List page in Tecton: a summary header and a searchable, client-filtered account list.
How to build an Account Details page in Tecton: a sortable, filterable transaction list with client-side search, column sorting, and pagination.
How to build a Bank Statement page in Tecton: a computed account summary and a q2-data-table of transactions for a statement period.
How to build a Message Center page in Tecton: a two-panel layout with a message list on the left and a selected message detail plus response form on the right.
The q2-currency generates an aria-label attribute that describes the currency value in a way that is understandable to users relying on assistive technologies. The aria-label is automatically generated based on the value, currency, and locale props, and it follows the formatting conventions of the specified locale.
The automatically generated aria-label can be overridden by setting a custom aria-label on the host element. This allows developers to provide a more specific or contextually appropriate description for screen reader users when needed.
The following CSS variables are available to override the default theme styles of the q2-currency component.
The changelog provides a detailed history of new features, improvements, and bug fixes going back to Tecton 1.30.0. If the button is disabled, it indicates there have been no detectable changes since then.