Skip to main content

​
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.
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}
/>

​
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
StateBackgroundTextIcon
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
StateColorIcon
Positive#16A34A (Green/07)arrow-up-right
Negative#B42318 (Error/700)arrow-down-right

​
Breakpoints

Lebar kartu 388px, padding 24px di semua sisi.
PropertiNilai
Lebar388px
Padding24px
Angka metrik36px Inter SemiBold
Label14–16px Inter Medium
Chart128×64px
Featured icon48×48px

​
Design Tokens

​
Card

TokenNilai
Background#FFFFFF
Border radius8px
Padding24px
Shadow0px 1px 3px rgba(16,24,40,0.1) + 0px 1px 2px rgba(16,24,40,0.06)

​
Typography

ElemenFontSizeWeightColor
Label (Simple/Icon 01)Inter14px500#71717A
Label (Icon 02/Chart)Inter16px500#011829
Angka metrikInter36px600#011829
Change textInter14px500#16A34A / #B42318
Context labelInter14px500#71717A
TrendBackgroundBorder
Positive#22C55E8px solid #16A34A
NegativeWarna sesuai jenis metrikborder 8px solid (shade lebih gelap)
TrendBackgroundBorderIcon color
Positive#DBEAFE8px solid #EFF6FF#1D4ED8
Negative#FEE2E28px 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