BasicButton

Button form-shaped — <button> native, tanpa href. Untuk aksi submit/reset/button biasa.

Bagian dari: vue-sabutton · Family: Basic

---

Import

import { BasicButton } from '@bpmlib/vue-sabutton';

Instalasi: lihat Installation & Setup di halaman utama.

---

Usage

<template>
  <BasicButton color="primary" @click="submitForm">Simpan</BasicButton>
  <BasicButton color="danger" outline @click="cancel">Batal</BasicButton>
</template>

---

API Reference

BasicButton

Cara Penggunaan:

Root element selalu <button>. @click tersedia lewat native attrs fallthrough — komponen ini tidak mendeklarasikan defineEmits, jadi click tidak muncul di tabel Events manapun, tapi listener @click tetap berfungsi normal.

Props

Name	Type	Default	Description
color	'primary' | 'secondary' | 'ternary' | 'success' | 'danger' | 'warning'	'secondary'	Warna semantic dari tokens.css
outline	boolean	false	Fill transparan, border+text berwarna color, alih-alih fill solid
small	boolean	false	Padding+font-size lebih kecil, mengikuti pasangan Bootstrap .btn-sm
expanded	boolean	false	Button melebar penuh (width: 100%)
disabled	boolean	false	Menonaktifkan button
icon	string | FaIconShape	-	SVG string mentah, atau object duck-typed { icon: [w,h,ligatures,unicode,svgPathData] }. Lihat Icon prop
onLoading	boolean | 'spinner' | 'dots' | 'cog'	false	true default ke 'cog'. Mengganti icon dengan spinner berputar dan menonaktifkan button
type	'button' | 'submit' | 'reset'	'button'	Sengaja override default native <button> ('submit') — mencegah accidental form-submit
asSubmit	boolean	false	Force type="submit". Precedence: asSubmit > asReset > type
asReset	boolean	false	Force type="reset"
form	string	-	Attribute form native — submit ke form di luar DOM tree button ini
tooltip	string	-	Teks tooltip, muncul saat hover/focus
tooltipColor	ButtonColor	mengikuti color	Warna tooltip
pulse	boolean | 'button' | 'pill'	false	Animasi echo ring — 'button' di seluruh root, 'pill' di badge saja (no-op + dev warning jika tidak ada badge)
pulseColor	ButtonColor	mengikuti color	Warna pulse echo
badge	boolean | string	-	true = dot kosong, string = pill berisi teks
badgeColor	ButtonColor	mengikuti color	Warna badge
badgePosition	'tl' | 'tr' | 'bl' | 'br'	'tr'	Posisi corner badge

Slots

Name	Props	Description
default	-	Isi teks/konten button. Kosong → button jadi icon-only (persegi, padding tipis)

Contoh:

<BasicButton
  color="success"
  :icon="checkIcon"
  badge="3"
  tooltip="Simpan perubahan"
  @click="save"
>
  Simpan
</BasicButton>

---

Styling

Styling sepenuhnya self-contained — lihat Import CSS di halaman utama. Tidak ada class yang perlu didefinisikan sendiri oleh consumer.

CSS Variables

Variable	Default	Description
--sa-bt--height	2.25rem (normal)	Tinggi button — sama di semua kombinasi icon-only/text/icon+text
--sa-bt--pulse-color	mengikuti pulseColor	Warna animasi pulse echo
--sa-bt--tooltip-pad	0.25rem	Padding internal tooltip
--sa-bt--tooltip-z	40	Z-index tooltip (Teleported ke body)

---

Related Components

Bagian dari family Basic:

• LinkButton — versi navigation-shaped (href-driven) dari button ini