KpiLabel

Label row of a composed Kpi: the label, then an optional icon and trailing slot at the end.

Import

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

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

Usage

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

Props

Prop	Type	Default	Description
icon	ReactNode		Decorative icon at the end of the row (aria-hidden).
trailing	ReactNode		Interactive or labelled content at the end of the row.
dot	boolean		Overrides the tile’s dot.

* 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