Metric Cards

Overview

Metric Cards digunakan untuk menampilkan data kuantitatif penting pada dashboard. Setiap kartu menampilkan satu metrik utama, dilengkapi indikator trend (positif/negatif), dan opsional tombol aksi untuk melihat laporan detail.

Views 24 hours⋮

2,000

↑ 100

↗

⋮

Views 24 hours

2,000

↑ 100

↗

Views 24 hours

⋮

2,000

↗ 100%vs last month

Views 24 hours⋮

2,000

↗ 100%vs last month

Installation

npm install @araf-ds/core

Usage

import { MetricCard } from "@araf-ds/core";

export default function Dashboard() {
  return (
    <MetricCard
      type="chart"
      label="Views 24 hours"
      value="2,000"
      trend="positive"
      change={100}
      changeLabel="vs last month"
      actions
      onViewReport={() => router.push("/reports/views")}
    />
  );
}

Type Variants

Metric Cards memiliki 4 tipe yang menentukan cara metrik divisualisasikan.

Simple
Icon 01
Icon 02
Chart

Tipe paling ringkas — hanya menampilkan label, angka metrik, dan badge trend di pojok kanan bawah angka. Ideal untuk metrik sederhana tanpa konteks visual tambahan.

Views 24 hours⋮

2,000

↑ 100

Bounce Rate⋮

4,120

↓ 40

<MetricCard
  type="simple"
  label="Views 24 hours"
  value="2,000"
  trend="positive"
  change={100}
/>

Menampilkan featured icon besar di bagian atas kartu dengan background dan border berwarna. Icon dipilih sesuai jenis metrik. Angka metrik dan badge trend tampil di bawah.

↗

⋮

Views 24 hours

2,000

↑ 100

↘

⋮

Bounce Rate

4,120

↓ 40

<MetricCard
  type="icon-01"
  label="Views 24 hours"
  value="2,000"
  icon={<ArrowCircleUpRightIcon />}
  trend="positive"
  change={100}
/>

Featured icon berukuran sama (48px), namun layout berbeda — icon dan label berada di satu baris (horizontal). Angka dan persentase perubahan tampil di bagian bawah dengan format teks inline.

↗

Views 24 hours

⋮

2,000

↗ 100%vs last month

↘

Bounce Rate

⋮

4,120

↘ 12%vs last month

<MetricCard
  type="icon-02"
  label="Views 24 hours"
  value="2,000"
  icon={<TrendUpIcon />}
  trend="positive"
  change={100}
  changeLabel="vs last month"
/>

Menampilkan mini sparkline chart (128×64px) di sudut kanan bawah kartu untuk memvisualisasikan tren data sepanjang periode. Label berada di atas, angka dan persentase perubahan di kiri chart.

Views 24 hours⋮

2,000

↗ 100%vs last month

Bounce Rate⋮

4,120

↘ 12%vs last month

<MetricCard
  type="chart"
  label="Views 24 hours"
  value="2,000"
  trend="positive"
  change={100}
  changeLabel="vs last month"
  chartData={[12, 18, 14, 22, 28, 35, 42, 50]}
/>

Actions

Prop actions menambahkan tombol “View report” di bagian bawah kartu, yang dapat digunakan untuk navigasi ke halaman detail laporan.

actions=false (default)

Views 24 hours⋮

2,000

↑ 100

actions=true

Views 24 hours⋮

2,000

↑ 100

View report →

// With action button
<MetricCard
  type="simple"
  label="Views 24 hours"
  value="2,000"
  trend="positive"
  change={100}
  actions
  onViewReport={() => router.push("/reports/views")}
/>

Trend Indicator

Setiap Metric Card menampilkan indikator trend untuk menunjukkan perubahan dibandingkan periode sebelumnya.

Badge (Simple & Icon 01)

↑ 100 Positive↓ 40 Negative

State	Background	Text	Icon
Positive	`#ECFDF3` (Success/50)	`#027A48` (Success/700)	`arrow-up`
Negative	`#FEF3F2` (Error/50)	`#B42318` (Error/700)	`arrow-down`

Change Text (Icon 02 & Chart)

↗ 100% vs last month↘ 12% vs last month

State	Color	Icon
Positive	`#16A34A` (Green/07)	`arrow-up-right`
Negative	`#B42318` (Error/700)	`arrow-down-right`

Breakpoints

Desktop
Mobile

Lebar kartu 388px, padding 24px di semua sisi.

Properti	Nilai
Lebar	388px
Padding	24px
Angka metrik	36px Inter SemiBold
Label	14–16px Inter Medium
Chart	128×64px
Featured icon	48×48px

Lebar kartu 328px (dalam container 360px, padding 16px kiri-kanan). Layout tidak berubah signifikan, hanya lebar yang menyesuaikan. Prop actions tidak tersedia pada varian mobile.

Properti	Nilai
Lebar	328px
Padding	24px
Angka metrik	36px Inter SemiBold
Actions	Tidak tersedia

Views 24 hours⋮

2,000

↑ 100

Design Tokens

Card

Token	Nilai
Background	`#FFFFFF`
Border radius	`8px`
Padding	`24px`
Shadow	`0px 1px 3px rgba(16,24,40,0.1)` + `0px 1px 2px rgba(16,24,40,0.06)`

Typography

Elemen	Font	Size	Weight	Color
Label (Simple/Icon 01)	Inter	14px	500	`#71717A`
Label (Icon 02/Chart)	Inter	16px	500	`#011829`
Angka metrik	Inter	36px	600	`#011829`
Change text	Inter	14px	500	`#16A34A` / `#B42318`
Context label	Inter	14px	500	`#71717A`

Featured Icon (Icon 01)

Trend	Background	Border
Positive	`#22C55E`	`8px solid #16A34A`
Negative	Warna sesuai jenis metrik	border 8px solid (shade lebih gelap)

Featured Icon (Icon 02)

Trend	Background	Border	Icon color
Positive	`#DBEAFE`	`8px solid #EFF6FF`	`#1D4ED8`
Negative	`#FEE2E2`	`8px solid #FFF1F2`	`#DC2626`

API Reference

`MetricCard`

type

"simple" | "icon-01" | "icon-02" | "chart"

required

Tipe tampilan kartu metrik.

label

string

required

Teks label metrik, ditampilkan di atas angka.

value

string | number

required

Nilai metrik utama yang ditampilkan besar (misal: "2,000", "89%").

trend

"positive" | "negative"

required

Arah perubahan metrik — menentukan warna dan ikon indikator trend.

change

number

required

Nilai perubahan numerik (misal: 100 → ditampilkan sebagai ↑ 100 atau 100%).

changeLabel

string

default:"\"vs last month\""

Teks keterangan perubahan. Hanya tampil pada tipe icon-02 dan chart.

icon

ReactNode

Ikon yang ditampilkan pada featured icon. Wajib untuk tipe icon-01 dan icon-02.

chartData

number[]

Array data untuk sparkline chart. Wajib untuk tipe chart.

actions

boolean

default:"false"

Jika true, menampilkan tombol “View report” di bagian bawah kartu (hanya Desktop).

onViewReport

() => void

Callback saat tombol “View report” diklik. Dibutuhkan jika actions adalah true.

breakpoint

"desktop" | "mobile"

default:"\"desktop\""

Breakpoint rendering kartu. Mobile tidak mendukung prop actions.

className

string

Class tambahan untuk kustomisasi styling.

Accessibility

Gunakan aria-label yang deskriptif pada kartu untuk screen reader, misal aria-label="Views 24 hours: 2,000, naik 100 dari periode sebelumnya"
Ikon trend harus menyertakan aria-hidden="true" karena sudah terwakili oleh teks perubahan
Tombol “View report” harus memiliki teks yang jelas atau aria-label jika hanya menampilkan ikon
Pastikan kontras warna badge trend memenuhi WCAG AA (hijau #027A48 di atas #ECFDF3 ✓)
Sparkline chart harus menyertakan role="img" dan aria-label yang mendeskripsikan tren

Do’s & Don’ts

Do

Gunakan satu metrik per kartu
Pastikan changeLabel memberikan konteks yang jelas (misal “vs last week”)
Pilih tipe chart untuk metrik dengan fluktuasi penting yang perlu divisualisasikan
Susun kartu dalam grid 3–4 kolom pada desktop
Gunakan tipe icon-01 untuk metrik dengan kategori visual yang jelas (penjualan, traffic, dll)

Don't

Jangan tampilkan lebih dari satu angka besar per kartu
Jangan gunakan tipe chart untuk data statis (tanpa perubahan waktu)
Jangan biarkan value terlalu panjang — potong jika perlu (misal 2.3M bukan 2,312,400)
Jangan sembunyikan indikator trend — selalu berikan konteks perubahan
Jangan gunakan actions=true tanpa handler onViewReport yang berfungsi

Actions

Data Display

Navigation

Overview

Installation

Usage

Type Variants

Actions

Trend Indicator

Badge (Simple & Icon 01)

Change Text (Icon 02 & Chart)

Breakpoints

Design Tokens

Card

Typography

Featured Icon (Icon 01)

Featured Icon (Icon 02)

API Reference

`MetricCard`

Accessibility

Do’s & Don’ts

Do

Don't

Actions

Data Display

Navigation

​Overview

​Installation

​Usage

​Type Variants

​Actions

​Trend Indicator

​Badge (Simple & Icon 01)

​Change Text (Icon 02 & Chart)

​Breakpoints

​Design Tokens

​Card

​Typography

​Featured Icon (Icon 01)

​Featured Icon (Icon 02)

​API Reference

​MetricCard

​Accessibility

​Do’s & Don’ts

Do

Don't

Overview

Installation

Usage

Type Variants

Actions

Trend Indicator

Badge (Simple & Icon 01)

Change Text (Icon 02 & Chart)

Breakpoints

Design Tokens

Card

Typography

Featured Icon (Icon 01)

Featured Icon (Icon 02)

API Reference

`MetricCard`

Accessibility

Do’s & Don’ts