Metrics
MetricCard with a 3px source accent, MetricValue, MetricSummary and the count badge used by the source accordion.
Figma: 10 / Components / MetricsTotal subscribers11,000
Usage
Source: src/components/ui/metrics.tsx
import { MetricBadgeCount, MetricCard, MetricSummary, MetricValue } from '@/components/ui/metrics'<MetricCard label='Revenue' value='$54,000' accent='positive' />Source accents
The accent matches the source color used in charts, so a metric and its series always agree.
Facebook Direct4,900
Messenger Ads4,500
Unsubscribes−500
With an action
An arrow button opens the drawer behind the metric.
Revenue$54,000
MetricSummary and MetricValue
Values in a row with a 24px gap, in Poppins / text-4xl / semibold.
Facebook revenue$608,000
Instagram revenue$101,000
Donors2,840
MetricBadge/Count
Messenger subscriber counts, with an optional share.
63412034%
When to use
When to reach for it, and when to use something else.
Use it for
Complete: Headline numbers at the top of dashboards and drawers.
Complete: Source accents that match the chart series.
Avoid
Not complete: More than four metric cards in a row.
Not complete: Accents that do not correspond to a series.
MetricCard
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | – | What is measured. |
| value | ReactNode | – | The formatted value. |
| accent | 'positive' | 'negative' | 'facebook' | 'messenger' | 'platform' | 'challenges' | 'instagram' | 'other' | 'birthdays' | 'misc' | 'positive' | Source color of the 3px accent. |
| actions | ReactNode | – | AvatarGroup or an arrow button. |
| size | 'default' | 'compact' | 'default' | compact for drawers. |
MetricValue
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | – | What is measured. |
| value | ReactNode | – | The formatted value. |
| info | string | – | Optional explanation behind an info icon. |
