Keadaan yang tidak digambar desainer
Desainer sering hanya menggambar keadaan normal. Tugasmu sebagai frontend adalah melengkapi yang hilang: hover, focus, disabled, loading, error, dan empty state. Menanyakan ini ke desainer sebelum mulai coding adalah tanda developer berpengalaman — bukan menebak sendiri lalu diminta revisi. Sepakati juga apa yang terjadi saat data kosong atau gagal dimuat — dua keadaan yang paling sering absen dari berkas desain.
👀 Contoh dulu
.input { border: 1px solid #d1d5db; }
.input:hover { border-color: #9ca3af; }
.input:focus-visible { outline: 2px solid #3b82f6; }
.input:disabled { background: #f3f4f6; cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: #dc2626; }Hasilnya: Satu komponen input dengan empat keadaan berbeda — padahal desainer mungkin hanya menggambar satu.
💡 Daftar periksa keadaan: normal, hover, focus, disabled, error, loading, dan empty state.
📝 Sekarang giliranmu
Lengkapi tombol dengan keadaan yang belum digambar: .btn:hover (background: #4338ca), .btn:focus-visible (outline: 3px solid #a5b4fc), dan .btn:disabled (opacity: 0.5 serta cursor: not-allowed).