Skip to content

Number

The Number component can be used imported from:

Playground

Parameters

The Web component uses the <z-number> tag:

The long option for square-* and cubic-* amounts is only supported for English locales.

By default, all the parameters are optional or can be set in different, except for the ones marked as required

The parametrization of the component can be done with the following custom HTML params:

NameTypeDescriptionSlotA11y
amount
[required]
numberThe value to be displayed.
localestringThe locale to be used. If not set, the default locale of the browser will be used.
unitstringThe unit to be displayed.
truncatebooleanThe number will be truncated.
compactbooleanThe number will be displayed in a compact format.
decimalsnumberThe number of decimals to be displayed.

Parameters use

amount

The amount to be displayed as a number.

locale

The locale to be used to format the number. If not set, the default locale of the browser will be used.

unit

The unit to be displayed with the number.

decimals

The number of decimals to be displayed. If not set, the default number of decimals of the number will be used. The maximum number of decimals is 5.

Flags

truncate

If set, the number will be truncated.

compact

The number will be displayed in a compact format.

Browser support

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples

CodeSandbox example