MetricTile

Single KPI value with delta.

A labelled metric with an optional suffix and a directional delta.

Demo

Demo loads from http://localhost:6006. Run pnpm storybook for it to render locally.

svelte

<script>
  import { MetricTile } from 'dssoca';
</script>

<MetricTile label="req/min" value="142" delta="↑12%" dir="up" />

Prop	Type	Default	Description
`label`	`string`	—	Required. Metric label.
`value`	`string \| number`	—	Required. The metric value.
`suffix`	`string`	—	Unit/suffix shown after the value.
`delta`	`string`	—	Delta text.
`dir`	`'up' \| 'down'`	`'up'`	Delta direction (colour).
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.