KpiValue

The highlighted number of a composed Kpi, coloured by the tile’s tone.

Import

import { KpiValue } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/kpi.

Usage

<KpiValue
  label="Citas hoy"
  value="12"
  description="3 pendientes"
  variant="default"
/>

Props

Prop	Type	Default	Description
suffix	ReactNode		Small suffix next to the number.
trend	ReactNode		Change indicator next to the value.
mono	boolean		Monospaced digits at a steady weight, for amounts and codes.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• With Suffix
• Danger
• Occupancy
• Narrow
• Tone Dot Icon Trend
• Card
• Trailing
• Composed

Source

packages/ui/src/containers/kpi/kpi.tsx