Button
Tombol untuk menjalankan aksi: menyimpan, mengirim, membuka modal, atau berpindah halaman.
Dasar
Tanpa prop apa pun, tombol tampil sebagai aksi utama: primary + solid, ukuran md. Arahkan kursor ke tombol: tombol terangkat sedikit, lalu mengecil saat ditekan.
Warna
Warna menunjukkan makna aksi, bukan selera. Pakai danger hanya untuk aksi yang menghapus atau tidak bisa dibatalkan.
Variant
Variant mengatur seberapa menonjol tombolnya. Dalam satu area, cukup satu tombol solid. Aksi pendukung pakai outline, soft, atau ghost. Hanya solid, soft, dan outline yang terangkat saat hover. Ghost dan link tetap diam, karena biasanya berada di toolbar atau di tengah teks.
Semua kombinasi
Lima warna × lima variant. Berguna untuk review desain; coba juga di mode gelap lewat tombol tema di kanan atas.
solidsoftoutlineghostlinkprimaryneutralsuccesswarningdanger
Ukuran
sm 28 px untuk tabel dan toolbar, md 34 px untuk form (default), lg 40 px untuk aksi utama di layar sentuh, misalnya aplikasi operator di lapangan.
Ikon
Ikon menerima nama dari katalog Iconify dengan format koleksi:nama-ikon, misalnya lucide:plus atau mdi:plus. Tanpa label, tombol otomatis jadi persegi dan wajib diberi aria-label. Kalau lupa, akan muncul peringatan di console saat development.
Loading
Klik tombol pertama untuk mencoba. Selama loading, klik diabaikan jadi data tidak terkirim dua kali. Lebar tombol juga tidak berubah dan fokus keyboard tidak hilang.
Disabled
Kalau memungkinkan, jelaskan kenapa aksinya belum bisa dilakukan (misalnya lewat teks di dekat tombol). Jangan hanya menonaktifkannya tanpa keterangan.
Sebagai link
Dengan prop to, tombol dirender sebagai <NuxtLink>. Pakai ini untuk berpindah halaman. Untuk aksi yang mengubah data, tetap pakai tombol biasa.
Lebar penuh & bulat
block cocok untuk form login dan layar mobile. rounded membuat tombol berbentuk pil.
Contoh: aksi form
Urutan dari kiri ke kanan: aksi paling ringan dulu, aksi utama di paling kanan.
API
Props
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| color | 'primary' | 'neutral' | 'success' | 'warning' | 'danger' | 'primary' | Makna aksi. primary untuk aksi utama, neutral untuk aksi umum, danger untuk aksi yang menghapus atau tidak bisa dibatalkan. |
| variant | 'solid' | 'soft' | 'outline' | 'ghost' | 'link' | 'solid' | Seberapa menonjol tombolnya. solid paling kuat, link paling ringan. |
| size | 'sm' | 'md' | 'lg' | 'md' | Tinggi 28, 34, atau 40 px. |
| type | 'button' | 'submit' | 'reset' | 'button' | Atribut type pada <button>. Default button supaya tombol di dalam form tidak men-submit tanpa sengaja. |
| icon | string | — | Nama ikon Iconify di kiri label, misalnya lucide:plus. |
| trailing-icon | string | — | Nama ikon Iconify di kanan label. |
| loading | boolean | false | Menampilkan spinner. Klik diabaikan, lebar tombol tidak berubah, dan fokus tetap di tombol. |
| disabled | boolean | false | Menonaktifkan tombol. |
| block | boolean | false | Lebar penuh mengikuti container. |
| rounded | boolean | false | Bentuk pil (sudut bulat penuh). |
| to | string | RouteLocation | — | Merender tombol sebagai link (NuxtLink). Bisa rute internal atau URL eksternal. |
Slots
| Slot | Tipe | Default | Keterangan |
|---|---|---|---|
| default | — | — | Label tombol. Kosongkan untuk tombol ikon saja. |
| leading | — | — | Mengganti ikon kiri dengan konten sendiri. |
| trailing | — | — | Mengganti ikon kanan dengan konten sendiri, misalnya badge jumlah. |
Event & atribut lain
Semua event dan atribut native (@click, aria-*, target, form, dan lain-lain) diteruskan ke elemen tombol atau link. class juga diteruskan, tapi hanya untuk tata letak (margin, lebar, posisi). Warna dan ukuran diatur lewat props.