Komponen Tombol (Buttons) - Dokumentasi Resmi Larapak

Komponen tombol deklaratif ala PrimeNG menggunakan tag <l-button>. Mendukung varian warna kontekstual (severity), posisi ikon fleksibel, ukuran bertingkat, bentuk kapsul membulat, dan status loading interaktif.

Varian Warna Kontekstual (Severities)

<!-- PrimeNG-Style Declarative Buttons -->
<l-button label="Utama (Primary)" severity="primary"></l-button>
<l-button label="Sekunder" severity="secondary"></l-button>
<l-button label="Sukses" severity="success"></l-button>
<l-button label="Informasi" severity="info"></l-button>
<l-button label="Peringatan" severity="warning"></l-button>
<l-button label="Bahaya (Danger)" severity="danger"></l-button>
<l-button label="Garis Luar" severity="outline"></l-button>
<l-button label="Ghost" severity="ghost"></l-button>

Varian Ukuran (Sizes: Small, Normal, Large)

<!-- Tombol dengan Tingkatan Ukuran -->
<l-button label="Ukuran Kecil" size="sm" severity="primary"></l-button>
<l-button label="Ukuran Normal" severity="primary"></l-button>
<l-button label="Ukuran Besar" size="lg" severity="primary"></l-button>

Tombol Kapsul Membulat (Rounded Pills)

<!-- Tombol dengan Atribut 'rounded' -->
<l-button label="Eksplorasi Fitur" severity="primary" rounded icon="compass"></l-button>
<l-button label="Unduh Berkas" severity="secondary" rounded icon="download"></l-button>
<l-button label="Langganan Pro" severity="success" rounded icon="star"></l-button>

Fleksibilitas Ikon (Kiri, Kanan & Ikon Saja)

<!-- Ikon di Kiri (Default) -->
<l-button label="Ikon di Kiri" icon="arrow-left" severity="secondary"></l-button>

<!-- Ikon di Kanan (icon-pos="right") -->
<l-button label="Lanjutkan" icon="arrow-right" icon-pos="right" severity="primary"></l-button>

<!-- Tombol Ikon Saja (icon-only) -->
<l-button icon="bookmark" severity="outline" icon-only></l-button>
<l-button icon="heart" severity="danger" rounded icon-only></l-button>

Status Memuat (Loading Spinner Interaktif)

<!-- Tombol Memuat dengan Spinner Bawaan -->
<l-button label="Memproses Data..." severity="primary" loading></l-button>

<!-- Simulasi Toggle Loading dengan JavaScript -->
<l-button id="btnSimpan" label="Simpan Perubahan" severity="primary"></l-button>
<script>
btn.addEventListener('click', () => {
    btn.setAttribute('loading', '');
    btn.setAttribute('label', 'Menyimpan...');
    setTimeout(() => {
        btn.removeAttribute('loading');
        btn.setAttribute('label', 'Berhasil Disimpan!');
    }, 2000);
});
</script>

Tombol Nonaktif (Disabled State)

<!-- Tombol Nonaktif -->
<l-button label="Aksi Terkunci" severity="primary" disabled></l-button>
<l-button label="Sekunder Nonaktif" severity="secondary" disabled></l-button>

Grup Tombol Terhubung (<l-button-group>)

<!-- PrimeNG-Style Button Group Deklaratif -->
<l-button-group>
    <l-button icon="align-left" severity="secondary" icon-only></l-button>
    <l-button icon="align-center" severity="secondary" icon-only></l-button>
    <l-button icon="align-right" severity="secondary" icon-only></l-button>
    <l-button icon="align-justify" severity="secondary" icon-only></l-button>
</l-button-group>

Sebelumnya: Koleksi Ikon Selanjutnya: Formulir & Input