Stat.Currency
| Property | Type | Description |
|---|---|---|
currencyDisplay | string | (optional) Use either empty/false to hide the sign/name or use code (NOK), name (kroner), symbol (kr) or narrowSymbol (for a shorter symbol variant). Defaults to narrowSymbol when the locale is no else we default to code. |
currencyPosition | string | (optional) Use either before or after to change/define the position of the currency. Defaults to auto (Browser API defaults, but with an exception, if the locale is nb-NO or no, use after as the default position). |
value | number | (required) A number. |
decimals | number | (optional) Set a number to define the number of decimals. Like decimals="0" will ensure that decimals are simply not shown. The default decimals for currency usage are 2 (Browser API default). |
rounding | omit half-even half-up | (optional) If omit is given, the decimal will NOT be rounded. If set to half-even, the value will be rounded to the nearest even number. If set to half-up, the fractional part is 0.5 or greater, the number is rounded up. If the fractional part is less than 0.5, the number is rounded down. Defaults to half-up. |
signDisplay | auto always exceptZero negative never | (optional) When to display the sign for the number. Use auto (default) for negative numbers only, always to always display sign, exceptZero for positive and negative numbers but not zero, negative for negative numbers only including negative zero, or never to never display sign. |
compact | boolean string | (optional) Shortens any number or currency including an abbreviation. You can combine compact with currency. It gives you zero decimal by default decimals={0}. Use either short or long. Defaults to short if true is given. |
prefix | React.Node | (optional) Add a string or React component before the number, including white space. |
suffix | React.ReactNode | (optional) Appends a string or React component after the number, including white space. When the suffix is a string starting with /, no space is added (e.g. suffix="/mnd" renders "123/mnd"). |
locale | string | (optional) Use a 2 Letter Language Code or an extended code such as nb-NO. Use auto to detect the locale from the browser (navigator.language). Defaults to the Norwegian locale: nb-NO. |
srLabel | string | (optional) Will add a visually hidden label, to give screen reader users the missing context to easier understand what the number represents. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
options | object | (optional) Accepts all number.toLocaleString or Intl.NumberFormat options as an object - can also be a JSON given as the parameter e.g. options={{ 'minimumFractionDigits': 2 }}. |
fontSize | "x-small" "small" "basis" "medium" "large" "x-large" "xx-large" | (optional) Typography size fallback used for both main and auxiliary content. mainSize and auxiliarySize override this value. If omitted, default is large (basis when nested inside Stat.Trend or Stat.Info, unless any size prop is set). |
mainSize | "x-small" "small" "basis" "medium" "large" "x-large" "xx-large" | (optional) Typography size for the main content. When omitted, it falls back to fontSize if provided. |
mainWeight | "regular" "medium" | (optional) Typography weight for the main content. |
auxiliaryWeight | "regular" "medium" | (optional) Typography weight for secondary content like currency sign and affixes. If omitted, and mainSize equals auxiliarySize while mainWeight is omitted, medium is used. |
auxiliarySize | "x-small" "small" "basis" "medium" "large" "x-large" "xx-large" | (optional) Typography size for secondary content like currency sign and affixes (prefix and suffix). When omitted, it falls back to fontSize if provided. |
colorizeBySign | boolean | (optional) If true, text color follows sign tone (+ green, - red). |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Stat.Percent
| Property | Type | Description |
|---|---|---|
value | number | (required) A number. |
decimals | number | (optional) Set a number to define the number of decimals. Like decimals="0" will ensure that decimals are simply not shown. The default decimals for currency usage are 2 (Browser API default). |
rounding | omit half-even half-up | (optional) If omit is given, the decimal will NOT be rounded. If set to half-even, the value will be rounded to the nearest even number. If set to half-up, the fractional part is 0.5 or greater, the number is rounded up. If the fractional part is less than 0.5, the number is rounded down. Defaults to half-up. |
signDisplay | auto always exceptZero negative never | (optional) When to display the sign for the number. Use auto (default) for negative numbers only, always to always display sign, exceptZero for positive and negative numbers but not zero, negative for negative numbers only including negative zero, or never to never display sign. |
compact | boolean string | (optional) Shortens any number or currency including an abbreviation. You can combine compact with currency. It gives you zero decimal by default decimals={0}. Use either short or long. Defaults to short if true is given. |
prefix | React.Node | (optional) Add a string or React component before the number, including white space. |
suffix | React.ReactNode | (optional) Appends a string or React component after the number, including white space. When the suffix is a string starting with /, no space is added (e.g. suffix="/mnd" renders "123/mnd"). |
locale | string | (optional) Use a 2 Letter Language Code or an extended code such as nb-NO. Use auto to detect the locale from the browser (navigator.language). Defaults to the Norwegian locale: nb-NO. |
srLabel | string | (optional) Will add a visually hidden label, to give screen reader users the missing context to easier understand what the number represents. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
options | object | (optional) Accepts all number.toLocaleString or Intl.NumberFormat options as an object - can also be a JSON given as the parameter e.g. options={{ 'minimumFractionDigits': 2 }}. |
fontSize | "x-small" "small" "basis" "medium" "large" "x-large" "xx-large" | (optional) Typography size fallback used for both main and auxiliary content. mainSize and auxiliarySize override this value. If omitted, default is large (basis when nested inside Stat.Trend or Stat.Info, unless any size prop is set). |
mainSize | "x-small" "small" "basis" "medium" "large" "x-large" "xx-large" | (optional) Typography size for the main content. When omitted, it falls back to fontSize if provided. |
mainWeight | "regular" "medium" | (optional) Typography weight for the main content. |
auxiliaryWeight | "regular" "medium" | (optional) Typography weight for secondary content like currency sign and affixes. If omitted, and mainSize equals auxiliarySize while mainWeight is omitted, medium is used. |
auxiliarySize | "x-small" "small" "basis" "medium" "large" "x-large" "xx-large" | (optional) Typography size for secondary content like currency sign and affixes (prefix and suffix). When omitted, it falls back to fontSize if provided. |
colorizeBySign | boolean | (optional) If true, text color follows sign tone (+ green, - red). |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Stat.Amount
| Property | Type | Description |
|---|---|---|
value | number | (required) A number. |
currency | string boolean | (optional) Currency code (ISO 4217) or true to use the default NOK. Uses two decimals by default. |
currencyDisplay | string | (optional) Use either empty/false to hide the sign/name or use code (NOK), name (kroner), symbol (kr) or narrowSymbol (for a shorter symbol variant). Defaults to narrowSymbol when the locale is no else we default to code. |
currencyPosition | string | (optional) Use either before or after to change/define the position of the currency. Defaults to auto (Browser API defaults, but with an exception, if the locale is nb-NO or no, use after as the default position). |
decimals | number | (optional) Set a number to define the number of decimals. Like decimals="0" will ensure that decimals are simply not shown. The default decimals for currency usage are 2 (Browser API default). |
rounding | omit half-even half-up | (optional) If omit is given, the decimal will NOT be rounded. If set to half-even, the value will be rounded to the nearest even number. If set to half-up, the fractional part is 0.5 or greater, the number is rounded up. If the fractional part is less than 0.5, the number is rounded down. Defaults to half-up. |
signDisplay | auto always exceptZero negative never | (optional) When to display the sign for the number. Use auto (default) for negative numbers only, always to always display sign, exceptZero for positive and negative numbers but not zero, negative for negative numbers only including negative zero, or never to never display sign. |
compact | boolean string | (optional) Shortens any number or currency including an abbreviation. You can combine compact with currency. It gives you zero decimal by default decimals={0}. Use either short or long. Defaults to short if true is given. |
prefix | React.Node | (optional) Add a string or React component before the number, including white space. |
suffix | React.ReactNode | (optional) Appends a string or React component after the number, including white space. When the suffix is a string starting with /, no space is added (e.g. suffix="/mnd" renders "123/mnd"). |
locale | string | (optional) Use a 2 Letter Language Code or an extended code such as nb-NO. Use auto to detect the locale from the browser (navigator.language). Defaults to the Norwegian locale: nb-NO. |
srLabel | string | (optional) Will add a visually hidden label, to give screen reader users the missing context to easier understand what the number represents. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
options | object | (optional) Accepts all number.toLocaleString or Intl.NumberFormat options as an object - can also be a JSON given as the parameter e.g. options={{ 'minimumFractionDigits': 2 }}. |
fontSize | "x-small" "small" "basis" "medium" "large" "x-large" "xx-large" | (optional) Typography size fallback used for both main and auxiliary content. mainSize and auxiliarySize override this value. If omitted, default is large (basis when nested inside Stat.Trend or Stat.Info, unless any size prop is set). |
mainSize | "x-small" "small" "basis" "medium" "large" "x-large" "xx-large" | (optional) Typography size for the main content. When omitted, it falls back to fontSize if provided. |
mainWeight | "regular" "medium" | (optional) Typography weight for the main content. |
auxiliaryWeight | "regular" "medium" | (optional) Typography weight for secondary content like currency sign and affixes. If omitted, and mainSize equals auxiliarySize while mainWeight is omitted, medium is used. |
auxiliarySize | "x-small" "small" "basis" "medium" "large" "x-large" "xx-large" | (optional) Typography size for secondary content like currency sign and affixes (prefix and suffix). When omitted, it falls back to fontSize if provided. |
colorizeBySign | boolean | (optional) If true, text color follows sign tone (+ green, - red). |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Stat.Trend
| Property | Type | Description |
|---|---|---|
children | React.ReactNode | (optional) Trend value content, e.g. +12.4% or -2.1%. |
tone | "positive" "negative" "neutral" | (optional) Tone override for state styling. |
srLabel | string | (optional) Will add a visually hidden label, to give screen reader users the missing context to easier understand what the number represents. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Stat.Rating
| Property | Type | Description |
|---|---|---|
value | number | (optional) Rating value used to colorize stars. |
max | number | (optional) Total number of items to render. Defaults to 5 for stars and 7 for progressive. |
variant | "stars" "progressive" | (optional) Visual variant. |
srLabel | string | (optional) Will add a visually hidden label, to give screen reader users the missing context to easier understand what the number represents. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Stat.Info
| Property | Type | Description |
|---|---|---|
children | React.ReactNode | (optional) Additional descriptive information. |
variant | "default" "subtle" "prominent" | (optional) Info color style variant. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Stat.Root
| Property | Type | Description |
|---|---|---|
children | React.ReactNode | (optional) Use Stat.Label (dt) and Stat.Content (dd) inside root. |
visualOrder | "label-content" "content-label" | (optional) Visual order of label and content while keeping semantic dt/dd markup in DOM. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Stat.Label
| Property | Type | Description |
|---|---|---|
children | React.ReactNode | (optional) Label content. |
srOnly | boolean | (optional) If true, hides the label visually while keeping it available for screen readers. |
fontWeight | "regular" "medium" | (optional) Typography weight for the label. |
fontSize | "x-small" "small" "basis" "medium" "large" "x-large" "xx-large" | (optional) Typography size for the label. Line-height is derived from the shared heading/text scale. |
variant | "default" "subtle" | (optional) Label color style variant. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Stat.Content
| Property | Type | Description |
|---|---|---|
children | React.ReactNode | (optional) Content value area. Typically contains Stat.Currency, Stat.Percent, or Stat.Trend. |
direction | "horizontal" "vertical" | (optional) Layout direction for the content items. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Stat.Inline
| Property | Type | Description |
|---|---|---|
children | React.ReactNode | (optional) Inline layout container for content elements, typically Stat.Trend and Stat.Info. |
Flex.Horizontal | Various | (optional) Supports all additional Flex.Horizontal properties. |
Translations
More info about translations can be found in the general localization and Eufemia Forms localization docs.
| Key | nb-NO | en-GB | sv-SE | da-DK |
|---|---|---|---|---|
Stat.rating | %value av %max | %value of %max | %value av %max | %value af %max |