Button Design — Mengundang Aksi yang Tepat

Button adalah elemen interaktif paling penting di UI. Desain button yang baik membuat user tahu apa yang akan terjadi saat diklik.

Hierarki Button

Primary — aksi utama (1 per section):

.btn-primary {
  background-color: #2563EB;
  color: white;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
}

Secondary — aksi alternatif:

.btn-secondary {
  background-color: transparent;
  color: #2563EB;
  border: 1px solid #2563EB;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
}

Ghost/Tertiary — aksi minor:

.btn-ghost {
  background: transparent;
  color: #6B7280;
  border: none;
  padding: 0.625rem 1.25rem;
}

Button States

Setiap button harus memiliki visual states:

• Default — state normal
• Hover — saat mouse di atas (background sedikit gelap)
• Active/Pressed — saat diklik (background lebih gelap lagi)
• Focused — saat difokus dengan keyboard (outline/ring)
• Disabled — tidak bisa diklik (opacity 0.5, cursor default)
• Loading — sedang proses (spinner, teks berubah)

Teks Button

1. Action-oriented — "Simpan", "Kirim Pesan", "Buat Akun"
2. Spesifik — "Hapus Item" lebih baik dari "OK"
3. Singkat — idealnya 1-3 kata
4. Hindari "Klik di sini" — tidak deskriptif

Ukuran

• Small (32px height) — inline actions, table rows
• Medium (40px height) — default, forms
• Large (48px height) — CTAs, hero section

Stripe menggunakan hierarki button yang sangat jelas — primary bold biru, secondary outline, dan ghost untuk aksi minor.