MessageCircle Bukan WhatsApp, Klien yang Ngasih Tahu

Selasa pagi, klien kirim screenshot halaman contact lewat grup WA. "Tombolnya kok nggak kelihatan kayak WhatsApp, Mas? Pengunjung ragu klik."

Gue buka komponen halaman contact di repo Next.js itu. Tombol CTA WhatsApp-nya pakai MessageCircle dari lucide-react, ikon chat generik satu balon. Di sebelahnya, label cuma nampilin 4 digit terakhir nomor lewat wa.slice(-4), jadi yang kebaca kayak 1234. Background section-nya warna primary, tombolnya outline tipis. Di layar gue yang brightness-nya mentok, kelihatan. Di HP klien, ilang.

Dugaan pertama gue: ini cuma soal kontras warna. Salah. Pas gue inspect element, akar masalahnya bentuk ikonnya. Orang nggak baca "Chat 1234" terus mikir "oh WhatsApp". Mereka nyari bentuk yang udah familiar: logo hijau-putih khas WA. MessageCircle itu netral, bukan merek, dan otak pengunjung nggak nyambungin balon chat generik ke aplikasi pesan tertentu.

Dan lucide memang nggak akan pernah nyediain. Mereka secara resmi nggak nerima logo brand, dengan alasan legal trademark, konsistensi desain, dan beban maintenance; rekomendasi resminya pakai Simple Icons. Per Juni 2026, rilis v1.0 Lucide malah menghapus semua brand icons yang tersisa karena tekanan legal (InfoQ). Jadi nunggu lucide nambahin ikon WA itu sama kayak nunggu hujan di musim kemarau. Nggak ada bug di kode gue, ini limitasi library — tapi tetep tanggung jawab gue bikin tombol yang jalan buat bisnis klien.

Tiga perubahan di commit 2f5d546

Pertama, komponen WhatsAppIcon sendiri. Inline SVG pakai path resmi WhatsApp, viewBox="0 0 24 24", fill="currentColor" biar ikut warna teks tombol, dan aria-hidden karena dia dekoratif — label teks yang jadi nama aksesibelnya. Gue nggak nambah dependency Simple Icons cuma buat satu ikon. Satu file 19 baris di components/shared/, bundle nggak gerak.

export function WhatsAppIcon({ className }: WhatsAppIconProps) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className={cn("size-5", className)}>
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967..." />
    </svg>
  );
}

Kedua, label 4 digit dibuang. Di contact-offices-section.tsx dan quick-contact-section.tsx, wa.slice(-4) hilang, diganti ikon plus label penuh. Pengunjung nggak perlu nebak "1234 itu nomor siapa".

Ketiga, tombol outline di atas background primary. Border primary-foreground/40, background transparan, hover jadi border penuh plus background semi solid. Standar WCAG 2.1 minta kontras teks minimal 4.5 banding 1, teks besar 3 banding 1 (W3C). Outline putih tipis di atas warna terang itu persis jenis kombinasi yang gagal di cek kontras, apalagi di layar yang kena pantulan matahari. Dengan hover yang makin solid, semua state tombol punya rasio yang layak.

Dua pendekatan sanitasi nomor dalam satu repo

Link CTA-nya format wa.me, dan di sini ada detail yang gue baru sadar pas baca ulang patch. Format click to chat WhatsApp yang benar: wa.me diikuti nomor internasional penuh, tanpa plus, tanpa nol di depan, tanpa strip. Format salah bikin muncul error nomor invalid (WhatsApp FAQ). Nomor WA di repo ini datang dari data JSON dan udah bersih, jadi templatenya langsung https://wa.me/${wa} tanpa olah apa-apa.

Tapi di komponen yang sama, nomor telepon buat link tel: dibersihin pakai regex replace(/[^0-9+]/g, "") sebelum dipakai. Dua filosofi beda dalam satu repo: satu percaya data udah rapi, satu bersihin paksa di runtime. Nggak ada yang salah secara teknis, tapi suatu saat ada aja nomor yang masuk lewat jalur lain dan salah satu asumsi ini jebol. Ke depan mungkin diseragamin aja, tapi itu kerjaan lain.

Opini gue tegas soal ini: brand icon di CTA bukan vanity. Pengguna nggak baca label, mereka kenal bentuk. Ikon chat generik buat WhatsApp itu friction murni di halaman yang tujuannya bikin orang kontak. Kalau ada yang bilang "ikon netral lebih clean", gue nggak setuju buat konteks halaman konversi. Gue juga milih inline SVG sendiri ketimbang nambah paket simple-icons cuma buat satu path — kalau nanti butuh sepuluh brand lain, baru gue pikir ulang.

Tombolnya sekarang: ikon WA di kiri, label penuh di kanan, hover yang jelas. Klien balas, "nah gitu baru kerasa WA-nya."