๐Ÿงช PGB Advanced Components โ€” Visual & Functional Test
1. Alert
Info
Ini adalah alert info โ€” klik โœ• untuk tutup.
Sukses
Operasi berhasil dilakukan.
Peringatan
Perhatikan hal ini sebelum lanjut.
Bahaya
Terjadi kesalahan kritis.
2. Accordion
Konten accordion pertama. Klik lagi untuk tutup.
Konten accordion kedua.
Konten accordion ketiga.
3. Progress Stepper
1
Profil
Selesai
2
Paket
Sedang diisi
3
Konfirmasi
Belum
Pilih paket langganan yang sesuai
Langkah 2 dari 3
4. Breadcrumb
5. Tab Pills
Konten Tab A โ€” ini aktif by default
Konten Tab B
Konten Tab C
6. Toggle Switch
Notifikasi Aktif
Terima notifikasi pesanan baru
Mode Promosi
Tampilkan banner promo di toko
7. Filter Chips
8. Dropdown Custom
Opsi 1โœ“
Opsi 2โœ“
Opsi 3โœ“
9. Combobox (Searchable)
โ–พ
10. Tag Input
Ketik lalu tekan Enter atau koma untuk tambah tag. Backspace untuk hapus.
11. Input Prefix / Suffix
Rp ,00
https://
12. OTP Input
Masukkan 6 digit kode OTP. Kode test: 123456
Tidak dapat kode?
13. Color Picker
#
#00453F
14. Rating Bintang
Klik bintang:
3 Cukup
15. Number Stepper
1
16. Price Range Slider
Min
Rp 100.000
โ€“
Max
Rp 800.000
17. Date Picker
18. Date Range Picker
19. Rich Text Editor

Ini adalah Rich Text Editor. Coba bold, italic, list, dll.

20. Timeline
โœ“
Pesanan Diterima
Pesanan #ORD-001 masuk ke sistem
10 Mei 2026, 09:00 WIB
๐Ÿ’ณ
Pembayaran Dikonfirmasi
Transfer berhasil diverifikasi
10 Mei 2026, 09:15 WIB
โš™
Sedang Diproses
Pesanan sedang disiapkan
10 Mei 2026, 10:00 WIB
!
Pengiriman Tertunda
Kurir tidak tersedia saat ini
11 Mei 2026, 08:00 WIB
21. Sortable Table
Nama โ†• Nilai โ†• Status โ†•
Budi85Aktif
Ani92Trial
Citra78Aktif
Doni95Suspended
22. Countdown Timer
02
Jam
:
00
Menit
:
00
Detik
โฑ Waktu tersisa
23. Chat Bubble
CS
Halo, ada yang bisa dibantu?
09:00
U
Iya, saya mau tanya soal pesanan saya.
09:01
CS
Silakan, nomor pesanannya berapa?
09:01
24. Context Menu
๐Ÿ–ฑ๏ธ Klik kanan di sini untuk context menu
โœ๏ธ Edit
๐Ÿ“‹ Salin
๐Ÿ—‘๏ธ Hapus
25. Tooltip
Tooltip di atas
Tooltip di bawah
Tooltip kanan
26. Popover
Info Penting
Ini adalah konten popover yang muncul saat tombol diklik. Berisi info tambahan.
27. Command Palette
๐Ÿ”
โ†‘โ†“ navigasi Enter pilih ESC tutup
Atau tekan Ctrl+K di mana saja
28. Bottom Sheet
Pilih Aksi
โœ๏ธ
Edit Produk
Ubah detail produk ini
๐Ÿ“‹
Duplikat
Buat salinan produk
๐Ÿ—‘๏ธ
Hapus Produk
Hapus permanen dari daftar
29. Drag to Reorder
โ ฟ
1
Item Pertama
Drag untuk reorder
โ ฟ
2
Item Kedua
Drag untuk reorder
โ ฟ
3
Item Ketiga
Drag untuk reorder
โ ฟ
4
Item Keempat
Drag untuk reorder
โœ“ Urutan tersimpan
30. Swipeable Card
โœ“ Arsip
๐Ÿ—‘ Hapus
๐Ÿ“ฆ
Pesanan #ORD-001
Geser kiri untuk hapus, kanan untuk arsip
Rp 150.000
โœ“ Arsip
๐Ÿ—‘ Hapus
๐Ÿ›
Pesanan #ORD-002
Geser kiri untuk hapus, kanan untuk arsip
Rp 85.000
31. FAB (Floating Action Button)
Klik tombol + di kanan bawah
Bonus: Toast, Modal, Confirm