Metric card

In context

Purpose

Metric card answers one question instantly: "how am I doing on this?" The number is the largest thing on the card; the label and optional trend support it. It exists to make a key figure legible at a glance — not to build a dense analytics view.

Anatomy

• Label — short and plain ("Today's sales", not "Gross revenue").
• Value — the hero. Large, bold, pre-formatted with currency and grouping by the caller.
• Trend (optional) — a small up/down change, coloured success or error.
• Icon (optional) — a quiet glyph to aid recognition.

Code

import { MetricCard } from '@daytwo/components'

<MetricCard
label="Today's sales"
value="Ks 124,000"
trend={{ direction: 'up', label: '+12% vs yesterday' }}
/>

Formatting and localisation are the caller's job — pass value already formatted.

When to use

• To surface one important number the user checks often.
• On the home screen, as the headline figure of the day.

When NOT to use

• For a grid of many numbers — that's a dashboard, which DayTwo is counter-positioned against. If you need a table of figures, you're building the wrong screen.
• For a number with no meaning to the user — only show figures a shop owner cares about, not internal metrics.
• For long text — Metric card is for a value, not a paragraph.

The correct scenario

The home screen opens with one Metric card — "Today's sales: Ks 124,000, +12% vs yesterday." The owner learns how today is going in under a second, which is exactly the "tells me how I'm doing" moment that builds trust.

Anti-patterns

Edge cases

Tokens used