Tombol

Tombol membantu pengguna memulai tindakan atau alur. Pilih dari berbagai jenis tombol untuk menginformasikan penekanan.

Tombol Penutup

Referensi

Jenis Link Status
Desain Sumber desain (Figma) Tersedia
Penerapan Jetpack Compose Tersedia

Sorotan

  • Pilih jenis tombol berdasarkan tingkat kepentingan tindakan. Makin penting tindakannya, makin besar penekanan pada tombol.
  • Tombol harus memiliki label yang jelas untuk menunjukkan tindakan yang dilakukan.
  • Menempatkan tombol secara logis di layar—tempat pengguna mungkin berharap untuk menemukannya.
  • Jangan menggunakan tombol secara berlebihan. Terlalu banyak tombol di layar mengganggu hierarki visual.

Varian

Ada enam jenis tombol:

  1. Tombol terisi
  2. Tombol Outline
  3. Tombol ikon
  4. Tombol ikon Outline
  5. Tombol panjang
  6. Tombol gambar
Tombol terisi Tombol Outline Tombol ikon Tombol ikon Outline
Tombol panjang Tombol gambar

Pilih jenis tombol berdasarkan tingkat kepentingan tindakan. Makin penting tindakannya, makin besar penekanan yang seharusnya dimiliki tombolnya.

Penekanan Tombol

Tombol isi dan garis batas

Tombol terisi memiliki dampak visual yang paling signifikan dan harus digunakan untuk tindakan penting final yang menyelesaikan alur, seperti Simpan, Gabung sekarang, Konfirmasi, atau Download.

Tombol bergaris batas adalah tombol penekanan sedang. Tombol tersebut berisi tindakan yang penting, tetapi bukan tindakan utama dalam aplikasi. Tombol yang tergarisbatasi cocok dengan tombol terisi untuk menunjukkan tindakan sekunder alternatif.

Anatomi

Anatomi tombol penuh dan tergarisbatasi

  1. Penampung
  2. Teks label
  3. Ikon (opsional)

Status

Representasi visual status komponen.

Status tombol terisi dan garis batas

  1. Default
  2. Fokus
  3. Ditekan

Spesifikasi

Spesifikasi tombol isi dan garis batas

Ikon dan tombol ikon garis batas

Gunakan tombol ikon untuk menampilkan tindakan dalam tata letak yang ringkas. Tombol ikon dapat mewakili tindakan pembuka seperti membuka menu tambahan atau penelusuran, atau mewakili tindakan biner yang dapat diaktifkan dan dinonaktifkan, seperti favorit atau bookmark. Fitur ini juga digunakan untuk memutar atau menjeda media.

Tombol ikon dapat ditentukan dalam tiga ukuran: kecil, sedang, dan besar.

Anatomi

Ikon & tombol ikon garis batas Anatomi

  1. Penampung
  2. Ikon

Status

Status tombol ikon & garis batas

  1. Default
  2. Fokus
  3. Ditekan

Status adalah representasi visual yang digunakan untuk mengomunikasikan status komponen atau elemen interaktif.

Spesifikasi

Spesifikasi tombol ikon & ikon garis batas

Tombol lebar

Tombol lebar digunakan untuk penekanan yang lebih tinggi daripada biasanya. Mereka berisi tindakan yang penting. Tombol-tombol yang mewakili opsi terkait dikelompokkan bersama. Grup harus memiliki platform yang sama.

Anatomi

Anatomi tombol lebar

  1. Penampung
  2. Ikon pemimpin
  3. Judul
  4. Subjudul

Status

Status tombol lebar

  1. Default
  2. Fokus
  3. Ditekan

Status adalah representasi visual yang digunakan untuk mengomunikasikan status komponen atau elemen interaktif.

Spesifikasi

Spesifikasi tombol lebar

Tombol gambar

Tombol gambar biasanya digunakan untuk menampilkan thumbnail konten yang tersedia di level navigasi berikutnya. Grup tersebut biasanya dikelompokkan bersama dengan tindakan terkait, dan grup tersebut harus memiliki platform yang sama.

Anatomi

Spesifikasi tombol gambar

  1. Penampung
  2. Ikon pemimpin
  3. Judul
  4. Subjudul
  5. Lapisan gambar, yang terdiri dari:
    1. {i>Scrim<i} (overlay status)
    2. Gradien (berdasarkan warna permukaan)
    3. Gambar

Status

Status tombol gambar

  1. Default
  2. Fokus
  3. Ditekan

Status adalah representasi visual yang digunakan untuk mengomunikasikan status komponen atau elemen interaktif.

Spesifikasi

Spesifikasi tombol gambar

Penggunaan

Tombol umumnya digunakan untuk mengomunikasikan tindakan yang dapat diambil pengguna. Elemen ini sering ditemukan dalam elemen UI seperti dialog, jendela modal, formulir, kartu, dan toolbar.

Tombol hanyalah salah satu opsi untuk merepresentasikan tindakan di UI Anda. Jangan menggunakannya secara berlebihan. Terlalu banyak tombol di layar mengganggu hierarki visual.

Anatomi Tombol

  1. Penampung
  2. Ikon
  3. Teks label
  4. Judul
  5. Subjudul
  6. Gambar

Penampung

Tombol menampilkan penampung di sekitar konten. Container menskalakan 1,1x pada fokus, sehingga mempertahankan padding internal. Berikut adalah beberapa pertimbangan untuk penampung:

  • Menetapkan lebar penampung berdasarkan konten dengan padding yang konsisten.
  • Tetapkan posisi relatif penampung ke petak tata letak responsif.
  • Menggunakan container warna solid untuk tombol terisi.
  • Gunakan goresan dan warna isian pada fokus untuk tombol dengan garis batas. Saat difokuskan, penampung akan mendapatkan warna isian beserta garis batas.
  • Untuk tombol lebar dan gambar, lebar penampung ditetapkan sesuai dengan petak tata letak.
  • Ukuran, posisi, dan perataan penampung dapat berubah seiring skala container induknya.

Penampung tombol

Penampung tombol teks dan ikon memiliki sudut membulat sepenuhnya. Penampung tombol lebar dan gambar memiliki penampung bulat berukuran 12 dp.

Anjuran

Lebar tombol yang terisi bisa menjadi responsif terhadap petak tata letak. Ikon dan teks label tetap berada di tengah saat lebar tombol bertambah.

Perhatian

Untuk tombol lebar dan gambar, lebar penampung ditentukan oleh penampung induk. Anchor konten di sebelah kiri.

Ikon

Ikon secara visual mengomunikasikan tindakan tombol dan membantu menarik perhatian. Keduanya harus ditempatkan di sisi depan tombol. Ikon selalu berada di tengah secara vertikal dalam container.

Anjuran

Tombol ikon dengan ukuran yang berbeda dapat dikelompokkan bersama.

Larangan

Jangan meratakan ikon dan teks secara vertikal di tengah tombol

Perhatian

Jangan gunakan dua ikon di tombol yang sama

Teks label

Teks label adalah elemen tombol yang paling penting. Pola ini menjelaskan tindakan yang terjadi jika pengguna mengetuk tombol.

Gunakan kapitalisasi kalimat untuk teks label tombol, dengan menggunakan huruf besar untuk kata pertama dan kata benda khusus. Hindari mengemas teks. Untuk keterbacaan maksimum, teks label harus tetap berada dalam satu baris.

Anjuran

Gunakan kapitalisasi kalimat untuk teks label tombol, menggunakan huruf besar untuk kata pertama dan kata benda khusus.

Perhatian

Memastikan keterbacaan teks label saat menempatkan tombol bergaris batas di atas gambar; gunakan scrim untuk mempertahankan kontras.

Gambar

Tombol gambar selalu memiliki overlay gradien dan scrim di atas gambar di latar belakang. Overlay gradien ditetapkan sesuai dengan warna penampung. Scrim berubah sesuai dengan status.

Grup tombol

Tombol muncul bersama dalam baris atau kolom untuk mempertahankan navigasi antar-tindakan yang konsisten. Bagian berikut menjelaskan pertimbangan.

Menginformasikan hierarki

Setiap layar harus memiliki satu tindakan utama yang diwakili oleh tombol yang terlihat jelas dan biasanya lebar. Tombol harus lebih mudah dilihat dan dipahami. Tombol lainnya harus kurang terlihat dan tidak mengalihkan perhatian pengguna dari tindakan utama.

Tombol pertama dalam grup bertindak sebagai tindakan utama karena fokus mendarat pada tombol tersebut terlebih dahulu.

Mempertahankan tata letak linear

Baris tombol Kolom tombol
  1. Tata letak baris
  2. Tata letak kolom

Menggunakan varian secara logis

Dalam tata letak kolom, varian tombol tunggal harus dipertahankan. Dalam tata letak baris, berbagai varian dapat dikelompokkan bersama dalam grup tombol, tetapi logikanya harus jelas. Tombol isi dan garis batas dapat digunakan dalam grup yang sama, tetapi harus memastikan hierarki yang jelas untuk tindakan.

Anjuran

Gunakan varian tombol yang sama dalam grup tombol.

Larangan

Mengombinasikan tombol panjang dan tombol gambar dalam satu grup tombol.

Perhatian

Dalam tata letak baris, tombol teks dan ikon dapat ditempatkan bersama. Pastikan tombol utama memiliki penekanan yang lebih tinggi.

Anjuran

Di tata letak kolom, gunakan hanya satu varian tombol.
Sebelumnya
Tata letak
Berikutnya
Kartu