Metric Card

Metric display variants with average indicator.

Simple

Show simple Metrics Card

Bar Gauge

Show Bar Gauge Metrics Card with average indicator.

Loading state

Show Metrics Card in a loading state.

Simple

Custom value element

APIs

MetricCard.Props

AttributeDescriptionTypeAccepted valuesDefault
titleCard/Metric Titlestring--
valueMetric Valuenumber or React.ReactElement--
unitMetric Unitstring--
widthCard Withstring-100%
loadingLoading Stateboolean-false
...native propsHTMLAttributes'id', className', ...-

MetricCard.MetricCardBarGauge.Props[alias: MetricCard.BarGauge]

AttributeDescriptionTypeAccepted valuesDefault
valueMetric Valuenumber--
minMax Valuenumber-0
maxMin Valuenumber-100
averageAverage Value (for avg. indicator)number--
colorBar Gauge Colorstring-theme.palette.success
loadingLoading Stateboolean-false
...native propsHTMLAttributes'id', className', ...-

MetricCard.MetricCardFooter.Props[alias: MetricCard.Footer]

AttributeDescriptionTypeAccepted valuesDefault
valueMetric Valuenumber--
averageAverage Value (for avg. indicator)number--
unitMetric Unitstring--
labelTextOptional Label Textstring--
loadingLoading Stateboolean-false
...native propsHTMLAttributes'id', className', ...-