Tut Wuri HandayaniSeragam Design System

Bottom Sheets

Anatomi Umum

Bottom sheets adalah komponen yang muncul dari bawah layar untuk menampilkan informasi tambahan atau pilihan tanpa membuat pengguna pindah halaman.

Secara umum, struktur bottom sheets terdiri dari:

  • Judul (opsional) — memberi gambaran singkat isi bottom sheets.
  • Konten — bagian utama, bisa berupa daftar, informasi, atau form.
  • Aksi (opsional) — tombol untuk melanjutkan atau menutup jika memang dibutuhkan.

Jenis Bottom Sheets dan Anatominya

1. Default Bottom Sheets

bottom_sheets_anatomy

Digunakan untuk menampilkan konten tambahan yang sederhana, biasanya informasi singkat atau daftar pendek.

Anatomi:

  • (Opsional) Judul — memberi konteks isi.
  • Konten utama — ringkasan, detail singkat, atau daftar.
  • (Opsional) Tombol — jika ada aksi lanjutan.

2. Menu Bottom Sheets

dialog

Dipakai untuk menampilkan daftar pilihan atau aksi yang bisa langsung dipilih pengguna.

Anatomi:

  • (Opsional) Judul — bila diperlukan untuk memberi konteks menu.
  • Daftar item menu — tiap baris adalah satu aksi.
  • (Opsional) Ikon pada item — membantu memperjelas arti aksi.

3. Dialog Bottom Sheets

menu

Dipakai ketika pengguna perlu berinteraksi lebih lanjut, misalnya mengisi form singkat atau memberi konfirmasi.

Anatomi:

  • Judul — wajib, menjelaskan maksud dialog.
  • Deskripsi (opsional) — memberi konteks tambahan.
  • Konten — bisa berupa form, input singkat, atau pesan konfirmasi.
  • Tombol aksi utama — misalnya Simpan atau Kirim.
  • Tombol aksi sekunder (opsional) — misalnya Batal.

Behavior

  • Muncul sesuai kebutuhan — hanya tampil ketika dipicu oleh aksi pengguna.
  • Mudah ditutup — bisa ditutup dengan geser ke bawah atau tap di luar area.
  • Tinggi menyesuaikan — setengah layar, hampir penuh, atau penuh bila kontennya panjang.
  • Interaksi cepat — default dan menu bisa ditutup kapan saja.
  • Interaksi wajib — dialog biasanya menuntut aksi selesai sebelum keluar.

Responsif

  • Mobile (utama) — tampil sebagai bottom sheets.

Content

  • Tablet/Desktop — bisa tetap menggunakan bottom sheets bila sesuai, atau diubah menjadi modal di tengah layar agar lebih nyaman dibaca.

modal desktop

Kapan Digunakan

  • Pastikan bottom sheets muncul sesuai konteks alur, bukan gangguan.
  • Cocok untuk kebutuhan cepat. Kalau isi terlalu kompleks, gunakan layar penuh.
  • Fungsinya harus membantu pengguna menyelesaikan sesuatu tanpa memutus alur utama.

Panduan Penulisan

Judul

  • Singkat, jelas, langsung ke inti.
  • Sentence case, tanpa titik di akhir.

Konten

  • Ringkas dan mudah dibaca.
  • Menu: label opsi 2–3 kata.
  • Dialog: gunakan kalimat lengkap untuk instruksi atau konfirmasi.

Tombol

  • Dialog: gunakan kata kerja jelas (Simpan, Hapus, Kirim).
  • Menu: tiap item sudah berfungsi sebagai aksi.
  • Default: tombol opsional, sesuai kebutuhan konten.