Currency

Updated:

Displays a formatted currency amount.

Variants

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>

Sign Display

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>

Properties

Learn more about properties.

amount

The amount you want formatted.

currency

Formats the amount to a specific currency.

locale

Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks.

signDisplay
sign-display

Determine 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.
size

Applies styling based on the size provided. If no size is provided, it will display as inline text.

variant

The 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.

Methods

The q2-currency element exposes methods that can be used to perform various actions on the component.

Learn more about methods.

displayedMessageValue

Test only

A method to retrieve the displayed currency value.

Type signature

displayedMessageValue() => Promise<string>

Release Notes

Initial Release

Colorization theming and formatting

Accessibility Report

Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

The following CSS variables are available to override the default theme styles of the q2-currencycomponent.