Komponen kecil, antarmuka yang konsisten.

Tombol dengan empat warna berbeda, jarak antarbagian yang berubah-ubah, dan pesan error yang tidak seragam biasanya muncul sedikit demi sedikit. Setiap layar mungkin terlihat cukup baik sendiri, tetapi keseluruhan aplikasi terasa tidak menyatu.

Solusinya tidak harus sebuah pustaka komponen yang besar. Mulailah dari keputusan yang paling sering diulang: warna, jarak, teks, dan perilaku elemen interaktif.

Beri nama pada keputusan visual

Simpan nilai yang digunakan berulang kali sebagai token. Nama sebaiknya menjelaskan peran, sehingga penggunaannya bisa dipahami tanpa mengingat kode warna.

:root {
  --color-surface: #ffffff;
  --color-text: #20241f;
  --color-action: #c6f17b;
  --space-small: 0.5rem;
  --space-medium: 1rem;
  --radius-control: 0.5rem;
}

.button {
  color: var(--color-text);
  background: var(--color-action);
  padding: var(--space-small) var(--space-medium);
  border-radius: var(--radius-control);
}

Token adalah tempat menyimpan keputusan, bukan alasan membuat ratusan variabel. Tambahkan token ketika nilainya memiliki peran yang jelas atau benar-benar digunakan di beberapa tempat.

Buat komponen dengan tanggung jawab kecil

Tombol merupakan contoh yang baik: bentuknya berulang, tetapi perilakunya tetap perlu mengikuti elemen HTML asli. Komponen React dapat meneruskan atribut standar tanpa membuat ulang semuanya.

import type { ButtonHTMLAttributes } from "react";

type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: "primary" | "secondary";
};

export function Button({
  variant = "primary",
  type = "button",
  className = "",
  ...props
}: ButtonProps) {
  return (
    <button
      {...props}
      type={type}
      className={`button button-${variant} ${className}`}
    />
  );
}

Nilai bawaan type="button" membuat tombol biasa tidak mengirim form secara tidak sengaja. Untuk tombol pengiriman, tulis type="submit" secara eksplisit. Navigasi menuju halaman lain tetap menggunakan tautan, karena tujuan elemennya berbeda.

Sertakan keadaan selain tampilan awal

Sebuah tombol belum selesai hanya karena terlihat rapi saat tidak disentuh. Periksa keadaan hover, fokus keyboard, disabled, dan proses yang sedang berlangsung.

.button:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

Saat mengirim form, teks seperti “Menyiapkan pesan…” dapat menjelaskan proses. Apabila perubahan status tidak terlihat langsung oleh pengguna pembaca layar, sediakan teks status yang sesuai, misalnya melalui area aria-live.

Jangan hanya mengubah warna untuk menunjukkan kesalahan. Sertakan pesan yang menyebutkan masalah dan cara memperbaikinya, lalu hubungkan pesan tersebut dengan input terkait.

Pisahkan konsistensi dari keseragaman

Tidak semua kartu harus menjadi komponen yang sama. Kartu project mungkin memiliki galeri dan tautan demo; kartu artikel membutuhkan tanggal dan waktu baca. Memaksa keduanya ke satu komponen bisa menghasilkan banyak kondisi yang sulit diikuti.

Gunakan token yang sama untuk bahasa visualnya, lalu pertahankan komponen berbeda ketika tanggung jawabnya memang berbeda. Abstraksi bisa ditambahkan setelah pola yang berulang benar-benar terlihat.

Coba komponen di konteks sebenarnya

Periksa komponen dengan judul panjang, konten kosong, layar kecil, serta navigasi keyboard. Letakkan tombol di dalam form, bukan hanya pada halaman contoh yang terisolasi.

Catat keputusan singkat di dekat komponen: kapan memakai varian utama, kapan memakai tautan, dan bagaimana menampilkan keadaan sibuk. Dokumentasi pendek yang digunakan bersama lebih berguna daripada aturan panjang yang cepat tertinggal.

Mulai dari beberapa elemen yang sering muncul. Biarkan kebutuhan produk menentukan kapan sistemnya perlu bertambah.