Skip to main content

Function: MetricCard()

MetricCard(__namedParameters): Element | null

Defined in: MetricCard/MetricCard.tsx:401

MetricCard component displays a metric in a consistent card layout.

It supports three metric types:

  • date: displays a date and optional remaining-days message
  • percentage: displays current/max values and a progress bar
  • number: displays current/max values and an optional footer text

Parameters​

ParameterType
__namedParametersMetricCardProps

Returns​

Element | null

Examples​

<MetricCard
  metric={{
    type: 'date',
    label: 'Renewal date',
    date: '31/12/2025',
    icon: 'fluent:calendar-24-regular',
    remainingDaysMessage: '10 days remaining',
  }}
/>
<MetricCard
  metric={{
    type: 'percentage',
    label: 'Plan usage',
    current: 350,
    max: 1000,
    icon: 'fluent:gauge-24-regular',
    showAlertThreshold: 80,
  }}
/>