Component Library › Overview
Tokens dari DR-001 · Auto Layout ready
Atomic Component Library
Library komponen reusable untuk Eduparx LMS. Setiap komponen menggunakan token dari DR-001, memiliki semua variant & state, dan siap digunakan dengan Figma Auto Layout.
v1.0.0 Refs: DR-001 Design Tokens Juni 2025
4
Komponen total
19
Variant & state
2
Atoms
2
Molecules
◻
Button
Atom
5 variant · 7 state
Atom Interaction
▭
Input / Form
Atom
6 tipe · 5 state
Atom Form
⬜
Card
Molecule
5 variant · 6 state
Molecule Content
⧉
Modal
Molecule
3 variant · 2 state
Molecule Overlay
Konvensi Penamaan Layer
Button/Primary/Default Input/Text/Error Card/Course/Enrolled Modal/Confirm/Default
Format: ComponentName/Variant/State
Button
Komponen tombol interaktif utama. Tersedia dalam 5 variant, 3 ukuran, dan 7 state. Mendukung icon kiri/kanan dan kondisi loading. Gunakan Primary hanya untuk satu CTA utama per halaman.
Button Variants Button/[Variant]/Default
5 variant untuk konteks penggunaan berbeda. Primary untuk aksi utama, Secondary untuk aksi pelengkap, Ghost untuk aksi tersier, Danger untuk aksi destruktif, Success untuk konfirmasi positif.
Atom Interactive
Primary
Secondary
Ghost
Danger
Success
Token Warna
--color-primary-500
Font Size
--text-body-sm · 14px
Height
40px (md)
Padding
--spacing-2 --spacing-4
Radius
--radius-md · 8px
Button States – Primary Button/Primary/[State]
7 state wajib: Default, Hover, Focus, Active, Disabled, Loading, dan Error (untuk aksi yang gagal).
Default
Hover
Focus
Active
Disabled
Loading
Error
Focus Ring
3px · --color-primary-300
Disabled
--color-neutral-100 bg
Loading
Spinner 14px, teks hidden
Button Sizes Button/Primary/Default – SM / MD / LG
3 ukuran: SM (32px) untuk aksi inline/tabel, MD (40px) default, LG (48px) untuk hero section.
Small · 32px
Medium · 40px
Large · 48px
Icon kiri
Full Width
SM Height
32px
MD Height
40px (default)
LG Height
48px
Auto Layout
Hug contents (width)
Tabel Variant & Token
Layer NameBackgroundText ColorBorderKegunaan
Button/Primary/Default--color-primary-500#ffffff--color-primary-500CTA utama halaman
Button/Secondary/Default#ffffff--color-primary-500--color-primary-300Aksi sekunder / outlined
Button/Ghost/Defaulttransparent--color-neutral-700transparentAksi tersier, navigasi
Button/Danger/Default--color-error-500#ffffff--color-error-500Hapus, batalkan, aksi destruktif
Button/Success/Default--color-success-500#ffffff--color-success-500Konfirmasi, tandai selesai
Input / Form
Komponen form: Text Input, Textarea, Select, Checkbox, Radio, dan Toggle. Semua komponen mendukung label, hint text, dan state validasi. Gunakan token DR-001 untuk semua warna border dan teks.
Text Input Input/Text/[State]
Input teks standar. Tersedia state: Default, Hover, Focus, Error, Success, Disabled. Mendukung prefix/suffix icon.
AtomForm
Default
✉
Gunakan email aktif untuk verifikasi akun.
Focus
✉
Error
✉ ⚠
Format email tidak valid.
Success
✉ ✓
Email tersedia dan valid.
Disabled
✉
Height
40px
Border Default
--color-neutral-300
Border Focus
--color-primary-500
Focus Ring
3px · --color-primary-100
Border Error
--color-error-500
Padding
--spacing-2 --spacing-4
Textarea, Select Input/Textarea/Default · Input/Select/Default
Textarea untuk teks panjang (bio, review), Select untuk pilihan dari daftar. Keduanya menggunakan base input style yang sama.
Atom
Maksimal 300 karakter.
▾
Checkbox, Radio, Toggle Input/Checkbox/[State] · Input/Radio/[State] · Input/Toggle/[State]
Kontrol seleksi. Checkbox untuk pilihan jamak, Radio untuk pilihan tunggal, Toggle untuk on/off setting.
Atom
Checkbox
Radio
Toggle
Checked Color
--color-primary-500
Toggle ON
--color-primary-500
Toggle OFF
--color-neutral-300
Size Checkbox
18×18px
Card
Komponen kartu kursus sebagai building block utama halaman katalog, dashboard, dan pencarian. Tersedia dalam variant Default, Enrolled, Completed, Featured, dan Compact.
Course Card – Variants Card/Course/[Variant]
5 variant sesuai konteks. Default untuk katalog, Enrolled untuk kursus yang sudah dibeli, Completed untuk kursus selesai, Free untuk kursus gratis.
MoleculeContent
💻 Web Development
New
● Pemrograman
React & Next.js Masterclass 2025
Budi Santoso · Senior Engineer
⭐ 4.9·2.341 siswa·32 jam
Rp 499rbRp 149rb
📊 Data Science
Enrolled
● Data Science
Python for Data Analysis
Rina Wijaya · Data Scientist
Progress68%
Bab 7 dari 12
🎨 UI/UX Design
✓ Selesai
● Desain
UI/UX Fundamentals dengan Figma
Sari Dewi · Product Designer
Progress100%
Sertifikat tersedia
✏️ Desain Grafis
GratisNew
● Desain
Canva untuk Pemula – Mulai dari Nol
Tim Eduparx
⭐ 4.7·5.102 siswa
Gratis
Width
260px default · stretch ready
Shadow Default
--shadow-1
Shadow Hover
--shadow-2
Radius
--radius-lg · 12px
Body Padding
--spacing-4
Enrolled Border
--color-primary-300
Card States Card/Course/Default – [State]
Hover menaikkan elevasi ke shadow-2 dan translate -2px. Focus menambahkan focus ring primary. Disabled mengurangi opacity 50%.
Default
📱
Mobile Dev Crash Course
Ahmad Fauzi
Rp 89rb
Hover
📱
Mobile Dev Crash Course
Ahmad Fauzi
Rp 89rb
Focus
📱
Mobile Dev Crash Course
Ahmad Fauzi
Rp 89rb
Disabled
📱
Mobile Dev Crash Course
Ahmad Fauzi
Tidak tersedia
Modal
Overlay dialog untuk konfirmasi, form, dan notifikasi penting. Selalu gunakan overlay backdrop semi-transparan. Jangan gunakan modal untuk pesan informasi ringan — gunakan Toast sebagai gantinya.
Modal Confirm Modal/Confirm/Default
Digunakan untuk aksi yang membutuhkan konfirmasi eksplisit dari pengguna. Selalu tampilkan konsekuensi aksi dengan jelas di body.
MoleculeOverlay
Konfirmasi Daftar Kursus
Tinjau detail sebelum melanjutkan pembayaran.
React & Next.js Masterclass 2025
Budi Santoso · 32 jam · 248 pelajaran
Rp 499.000 Rp 149.000
Dengan mendaftar, kamu mendapat akses seumur hidup ke seluruh materi dan pembaruan kursus. Pembayaran tidak dapat dikembalikan setelah 7 hari.
Max Width
480px
Shadow
--shadow-4
Backdrop
rgba(15,23,42,.45)
Radius
--radius-lg
Header Padding
--spacing-5 --spacing-6
Animasi
scale(.96)→(1) + fade, 200ms
Modal Danger Modal/Danger/Default
Untuk aksi destruktif (hapus, batalkan). Gunakan icon peringatan dan tombol aksi utama variant Danger. Selalu berikan opsi untuk membatalkan.
Molecule
⚠️
Hapus Kursus Ini?
Tindakan ini tidak dapat dibatalkan.
Kamu akan menghapus kursus "Python for Data Analysis" secara permanen. Seluruh progress, catatan, dan sertifikat yang berkaitan akan ikut terhapus.
Perhatian: 1.204 siswa yang sudah terdaftar akan kehilangan akses ke kursus ini.
Modal Form Modal/Form/Default
Modal yang berisi form input. Cocok untuk tambah data, edit profil, atau submit review tanpa pindah halaman.
Molecule
Tulis Ulasan Kursus
Bantu siswa lain dengan pengalamanmu.
★★★★★
4 dari 5 bintang