Balance Indicator#

Use Balance Indicator when you want to communicate the following points at the same time:

• An very important total amount – a number that relates to a user in a significant way, in our case, it is always the Credit Limit.
• The amount that is left in this balance – you want to communicate the used part, and how it relates to the unused part.

Balance Indicator renders this relationship between the used and unused, giving the user a perspective into their financial situation.

Pass nothing but the descriptions will make the component expect values and render a loading placeholder for the values.

Secondary value has 2 styles – dimmed and normal. dimmed reduces the prominence of the text – make it just a decorative element that ask no attention.

By default, the style is automatically set to dimmed when you explicitly pass 0 to the secondaryValue prop. Pass secondaryValueStyle="normal" to remove this behaviour and always make the text prominent.

Use dimmed carefully. Always first consider if you can hide the secondary value completely.

Meter has 2 styles – normal and critical. critical recolor the bar representing the value into a color with the critical semantic.

Use critical carefully. Avoid intepretating the numbers for the user, which could result in nudging the user into action.

A good use-case for critical, is when the user won't be able to perform an important and beneficial action unless the situation is addressed.

Currently there is only color changes in setting the style. In near future release, we will add more signifiers for both sighted users and screen reader users.

For now and for later as well, please always formulate the message as a concise piece of text and pass it as the title prop.

Example:

You have 1000 euro in total.
You have used 200 euro.

set prop showSecondaryValue to false. This is useful as you don't always need to communicate a secondary value.

Add more bars into the meter via slot prop slotMeter.