Data

Metric

Displays a key metric with label, tabular numeric value, and description slots.

idle

Usage

import {
	Metric,
	MetricDescription,
	MetricLabel,
	MetricValue,
} from "@mizen-labs/ui";

The parts and how they nest, taken from the preview above.

<Metric>
	<MetricLabel />
	<MetricValue />
	<MetricDescription />
</Metric>

Guidance	Practice
Do	Pair the value with its unit and reporting period. Explain the comparison or source in the description.

Guidance	Boundary
Scope	The component presents values. Calculations, rounding policy, and freshness belong to the application.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`Metric`	`MetricProps`	`—`	Root container for metric displays with a fixed div semantic host.
`MetricLabel`	`MetricLabelProps`	`—`	Label slot describing the metric with a fixed div semantic host.
`MetricValue`	`MetricValueProps`	`—`	Value slot with tabular numeric typography and a fixed div semantic host.
`MetricDescription`	`MetricDescriptionProps`	`—`	Description slot for supporting copy with a fixed div semantic host.
`MetricDelta`	`MetricDeltaProps`	`good: "up", locale: "en-US"`	Change chip for a fractional value (0.16 is +16%). Green when the change moves in the good direction, red when it moves against it, neutral at zero.

Data

Displays a key metric with label, tabular numeric value, and description slots.

idle

import {
	Metric,
	MetricDescription,
	MetricLabel,
	MetricValue,
} from "@mizen-labs/ui";

The parts and how they nest, taken from the preview above.

<Metric>
	<MetricLabel />
	<MetricValue />
	<MetricDescription />
</Metric>

Guidance	Practice
Do	Pair the value with its unit and reporting period. Explain the comparison or source in the description.

Guidance	Boundary
Scope	The component presents values. Calculations, rounding policy, and freshness belong to the application.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`Metric`	`MetricProps`	`—`	Root container for metric displays with a fixed div semantic host.
`MetricLabel`	`MetricLabelProps`	`—`	Label slot describing the metric with a fixed div semantic host.
`MetricValue`	`MetricValueProps`	`—`	Value slot with tabular numeric typography and a fixed div semantic host.
`MetricDescription`	`MetricDescriptionProps`	`—`	Description slot for supporting copy with a fixed div semantic host.
`MetricDelta`	`MetricDeltaProps`	`good: "up", locale: "en-US"`	Change chip for a fractional value (0.16 is +16%). Green when the change moves in the good direction, red when it moves against it, neutral at zero.