Skip to content

KpiValue ⚠️ Experimental

The KpiValue component can be used imported from:

Playground

Parameters

Slots

This component has slots. Check the documentation about how to use the slots.

NameTagsDescription
headerspanThe title of the KPI
descriptionspanThe description of the KPI

Parameters use

Check the documentation about how to use the parameters.

amount

The amount parameter is used to set the value of the KPI. Make sure to use a number.

difference

The difference parameter is used to set the difference between the current value and the previous value. Make sure to use a number. If the value is positive, the arrow will be green, and if it is negative, the arrow will be red.

The header parameter is used to set the header of the KPI. You can also use the header slot to set the header of the KPI.

Header

description

The description parameter is used to set the description of the KPI. You can also use the description slot to set the description of the KPI.

Description

locale

The locale parameter is used to set the locale of the KPI. Make sure to use a string.

Browser support

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples

CodeSandbox example