MetricTile

A compact labelled value with an optional tone bar, for process and attempt metrics.

Source

Import

import { MetricTile } from "@flanksource/clicky-ui/data";

Demos

Tones · Open in Storybook

Without Bar · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
barPct	number	—	Fill of the bar under the value, 0-100; omit for no bar.
className	string	—	—
label*	string	—	—
tone	enum	neutral	Colours the value and the bar. Defaults to neutral.
value*	string	—	—