# KpiLabel

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

Source: https://ui.jcsoftdev.com/docs/components/kpi-label

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

## Import

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

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

## Usage

```tsx
<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](/storybook/?path=/story/containers-kpi--default)
- [With Suffix](/storybook/?path=/story/containers-kpi--with-suffix)
- [Danger](/storybook/?path=/story/containers-kpi--danger)
- [Occupancy](/storybook/?path=/story/containers-kpi--occupancy)
- [Narrow](/storybook/?path=/story/containers-kpi--narrow)
- [Tone Dot Icon Trend](/storybook/?path=/story/containers-kpi--tone-dot-icon-trend)
- [Card](/storybook/?path=/story/containers-kpi--card)
- [Trailing](/storybook/?path=/story/containers-kpi--trailing)
- [Composed](/storybook/?path=/story/containers-kpi--composed)

## Source

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