Button Component

Button adalah komponen dasar yang digunakan untuk melakukan aksi seperti menyimpan data, membuka modal, navigasi halaman, atau interaksi lainnya. Button di Skalfa App 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