Teks Interaktif — Link, Button Text, dan Truncation

Dalam UI, teks bukan hanya untuk dibaca — sebagian teks bisa diklik, diketik, atau dipotong. Masing-masing punya aturan desain tersendiri.

Link Text

Link yang baik:

• Warna berbeda dari teks biasa (biru default #2563EB atau warna aksen)
• Underline pada hover (atau selalu underline untuk accessibility)
• Deskriptif — "Lihat dokumentasi" lebih baik dari "klik di sini"
• Cursor pointer untuk menandakan interaktivitas

a {
  color: #2563EB;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

Button Text

Teks pada tombol:

• Singkat dan action-oriented — "Simpan", "Lanjutkan", bukan "Klik untuk menyimpan data"
• Font-weight medium-bold (500-600)
• Text-transform — capitalize lebih mudah dibaca dari UPPERCASE

Truncation (Pemotongan Teks)

Ketika teks terlalu panjang untuk ruang yang tersedia:

Single-line truncation:

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Multi-line truncation (2 baris):

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Input Text

Teks dalam input form:

• Placeholder — warna abu-abu terang (#9CA3AF), deskriptif tapi singkat
• Input text — warna sama dengan body text
• Font-size minimal 16px — di bawah ini, iOS akan zoom-in otomatis pada input!

App seperti Gojek dan Tokopedia sangat hati-hati dengan truncation — nama produk yang panjang dipotong dengan elipsis, tapi informasi penting (harga) selalu terlihat penuh.