<custom-button>

CustomSubmitButton

An AJAX-powered form button that auto-detects icons from label text, shows loading state, handles confirmation dialogs for destructive actions, and integrates with any form by ID.

AJAX Auto-Icons Confirmation Loading State

<script src="button.js"></script>

Basic Examples

<!-- Save button - auto-detects floppy disk icon -->
<custom-button
  label="Save Changes"
  form-id="myForm"
  post="/api/save"
  buttontype="success"
></custom-button>

<!-- Delete with confirmation modal -->
<custom-button
  label="Delete Record"
  form-id="myForm"
  post="/api/delete"
  buttontype="danger"
  method="DELETE"
></custom-button>

<!-- Create button -->
<custom-button
  label="Create New"
  form-id="myForm"
  post="/api/create"
  buttontype="info"
></custom-button>

Confirmation Dialog

Any button with "delete" in the label automatically triggers a Bootstrap confirmation modal before AJAX submission. Customize the message or skip it.

<!-- Auto-triggers confirmation for "delete" labels -->
<custom-button
  label="Delete Account"
  form-id="accountForm"
  post="/api/delete-account"
  confirm-title="Delete Account?"
  confirm-message="This will permanently delete your account."
></custom-button>

<!-- Skip confirmation -->
<custom-button
  label="Delete Draft"
  skip-confirmation="true"
  post="/api/delete-draft"
></custom-button>

Auto Icon Detection

Icons are automatically chosen from the button's label. Override with icon, or disable with disable-auto-icon="true".

Label contains "save"

💾 floppy-disk

Label contains "delete"

🗑 trash

Label contains "edit"

✏️ pencil-simple

Label contains "create"

➕ plus

Label contains "download"

⬇️ download-simple

Label contains "submit"

✈️ paper-plane-tilt

<!-- Custom icon override -->
<custom-button
  label="Launch Campaign"
  icon="rocket"
  icon-position="end"
  icon-size="16"
></custom-button>

<!-- Disable auto-icon -->
<custom-button
  label="Submit"
  disable-auto-icon="true"
></custom-button>

Attributes

Attribute	Type	Description	Default
label	string	Button text. Drives auto-icon detection.	Submit
form-id	string	ID of the form to serialize on click	—
post	string	AJAX submission URL	—
method	string	HTTP method: GET, POST, PUT, DELETE, PATCH	POST
buttontype	string	Bootstrap variant: danger, warning, success, info	warning
showspinner	boolean	Show loading spinner during AJAX	false
confirm-title	string	Modal title for delete confirmation	Confirm Delete
confirm-message	string	Modal body text	Are you sure?
skip-confirmation	boolean	Skip confirmation even for delete actions	false
icon	string	Phosphor icon name override	auto
icon-position	string	Icon position: start or end	start
icon-size	number	Icon size in px	14
disable-auto-icon	boolean	Turn off automatic icon detection	false
target	string	CSS selector — replace innerHTML with AJAX response	—

<icon-button>

IconButton

A compact icon-only button with ripple effects, AJAX support, toast notifications, and Phosphor icon integration.

<script src="smart_button.js"></script>

Examples

<smart-button
  icon="pencil-simple"
  tooltip="Edit"
  color="primary"
  get="/api/edit/"
></smart-button>

<smart-button
  icon="trash"
  tooltip="Delete"
  color="danger"
  post="/api/delete/"
  toast="Item deleted"
></smart-button>

<smart-button
  icon="download-simple"
  tooltip="Export"
  href="/export/csv"
></smart-button>

Attributes

Attribute	Type	Description	Default
icon	string	Phosphor icon name (e.g., trash, pencil-simple)	—
tooltip	string	Tooltip text shown on hover	—
color	string	Color theme: primary, danger, success, warning	primary
get	string	AJAX GET request URL	—
post	string	AJAX POST request URL	—
href	string	Navigate to URL on click	—
toast	string	Toast message shown on success	—
size	string	Button size: sm, md, lg	md