Button Component

Button adalah komponen dasar yang digunakan untuk melakukan aksi seperti menyimpan data, membuka modal, navigasi halaman, atau interaksi lainnya. Button di Next-Light mendukung berbagai variasi seperti solid, outline, light, hingga simple, serta mendukung ikon, loading, ukuran, dan pewarnaan lengkap.

Contoh Penggunaan

Kode berhasil di copy!
5
Kode berhasil di copy!
5
Kode berhasil di copy!
5
Kode berhasil di copy!
5
Kode berhasil di copy!
5
Kode berhasil di copy!
5
Kode berhasil di copy!
5

Properti Bawaan:

label : string | ReactNode

Teks atau elemen yang ditampilkan di dalam button.

Kode berhasil di copy!
5

icon : IconDefinition | FontAwesome Icon

Menampilkan ikon di dalam button, default menggunakan FontAwesome Icon.

Kode berhasil di copy!
5

variant : 'solid' | 'outline' | 'light' | 'simple'

Jenis gaya button, default: 'solid'.

Kode berhasil di copy!
5

paint : 'primary' | 'secondary' | 'success' | 'danger' | 'warning'

Tema warna button. default: 'primary'.

Kode berhasil di copy!
5

size : 'xs' | 'sm' | 'md' | 'lg'

Mengatur ukuran button. default: 'md'.

Kode berhasil di copy!
5

rounded : boolean | string

Mengatur radius, true membuat button menjadi full-rounded, string untuk custom sesuai rounded tailwind css.

Kode berhasil di copy!
5

block : boolean

Membuat button memiliki lebar penuh container.

Kode berhasil di copy!
5

onClick : () => void

Event klik pada button

Kode berhasil di copy!
5

href : string

Jika diisi, button berubah menjadi link (menggunakan Next.js <Link>)

Kode berhasil di copy!
5

disabled : boolean

Menonaktifkan button atau membuatnya menjadi disabled.

Kode berhasil di copy!
5

loading : boolean

Membuat button dalam mode loading

Kode berhasil di copy!
5

className : string

Mendukung custom styling menggunakan prefix: base::, icon::, dan loading::.

Kode berhasil di copy!
5