@keenmate/pure-admin-core 2.3.1 → 2.3.3

package/snippets/buttons.html

@@ -1,365 +1,375 @@
-<!-- ================================
-     BUTTON SNIPPETS
-     Pure Admin Visual Framework
-     ================================ -->
-
-<!-- BASIC BUTTONS - Variants -->
-
-<!-- Primary Button -->
-<button class="pa-btn pa-btn--primary">Primary</button>
-
-<!-- Secondary Button -->
-<button class="pa-btn pa-btn--secondary">Secondary</button>
-
-<!-- Success Button -->
-<button class="pa-btn pa-btn--success">Success</button>
-
-<!-- Warning Button -->
-<button class="pa-btn pa-btn--warning">Warning</button>
-
-<!-- Danger Button -->
-<button class="pa-btn pa-btn--danger">Danger</button>
-
-<!-- Info Button -->
-<button class="pa-btn pa-btn--info">Info</button>
-
-<!-- Light Button -->
-<button class="pa-btn pa-btn--light">Light</button>
-
-<!-- Dark Button -->
-<button class="pa-btn pa-btn--dark">Dark</button>
-
-
-<!-- BUTTON SIZES -->
-
-<!-- Extra Small Button -->
-<button class="pa-btn pa-btn--primary pa-btn--xs">Extra Small</button>
-
-<!-- Small Button -->
-<button class="pa-btn pa-btn--primary pa-btn--sm">Small</button>
-
-<!-- Default Button -->
-<button class="pa-btn pa-btn--primary">Default</button>
-
-<!-- Large Button -->
-<button class="pa-btn pa-btn--primary pa-btn--lg">Large</button>
-
-<!-- Extra Large Button -->
-<button class="pa-btn pa-btn--primary pa-btn--xl">Extra Large</button>
-
-
-<!-- OUTLINE BUTTONS -->
-
-<!-- Outline Primary -->
-<button class="pa-btn pa-btn--outline-primary">Primary</button>
-
-<!-- Outline Secondary -->
-<button class="pa-btn pa-btn--outline-secondary">Secondary</button>
-
-<!-- Outline Success -->
-<button class="pa-btn pa-btn--outline-success">Success</button>
-
-<!-- Outline Warning -->
-<button class="pa-btn pa-btn--outline-warning">Warning</button>
-
-<!-- Outline Danger -->
-<button class="pa-btn pa-btn--outline-danger">Danger</button>
-
-<!-- Outline Info -->
-<button class="pa-btn pa-btn--outline-info">Info</button>
-
-
-<!-- BUTTON STATES -->
-
-<!-- Normal Button -->
-<button class="pa-btn pa-btn--primary">Normal</button>
-
-<!-- Disabled Button -->
-<button class="pa-btn pa-btn--primary" disabled>Disabled</button>
-
-<!-- Loading Button -->
-<button class="pa-btn pa-btn--primary pa-btn--loading">
-  <span class="pa-btn__spinner"></span>
-  Loading...
-</button>
-
-
-<!-- BLOCK BUTTONS -->
-
-<!-- Block Level Button -->
-<button class="pa-btn pa-btn--primary pa-btn--block">Block Level Button</button>
-
-
-<!-- BUTTON GROUPS -->
-
-<!-- Horizontal Button Group (default) -->
-<div class="pa-btn-group">
-  <button class="pa-btn pa-btn--secondary">Left</button>
-  <button class="pa-btn pa-btn--secondary">Middle</button>
-  <button class="pa-btn pa-btn--secondary">Right</button>
-</div>
-
-<!-- Vertical Button Group -->
-<div class="pa-btn-group pa-btn-group--vertical">
-  <button class="pa-btn pa-btn--secondary">Top</button>
-  <button class="pa-btn pa-btn--secondary">Middle</button>
-  <button class="pa-btn pa-btn--secondary">Bottom</button>
-</div>
-
-
-<!-- BUTTON GROUP GAP VARIANTS -->
-<!-- Use gap-* utility classes to adjust spacing -->
-
-<!-- Compact Gap (2px) -->
-<div class="pa-btn-group gap-2">
-  <button class="pa-btn pa-btn--primary">A</button>
-  <button class="pa-btn pa-btn--primary">B</button>
-  <button class="pa-btn pa-btn--primary">C</button>
-</div>
-
-<!-- Default Gap (3px) -->
-<div class="pa-btn-group">
-  <button class="pa-btn pa-btn--primary">A</button>
-  <button class="pa-btn pa-btn--primary">B</button>
-  <button class="pa-btn pa-btn--primary">C</button>
-</div>
-
-<!-- Loose Gap (8px) -->
-<div class="pa-btn-group gap-8">
-  <button class="pa-btn pa-btn--primary">A</button>
-  <button class="pa-btn pa-btn--primary">B</button>
-  <button class="pa-btn pa-btn--primary">C</button>
-</div>
-
-
-<!-- BUTTON GROUP VERTICAL ALIGNMENT -->
-
-<!-- Vertical Left (default) -->
-<div class="pa-btn-group pa-btn-group--vertical">
-  <button class="pa-btn pa-btn--secondary">Short</button>
-  <button class="pa-btn pa-btn--secondary">Medium Button</button>
-  <button class="pa-btn pa-btn--secondary">Longer Button Text</button>
-</div>
-
-<!-- Vertical Center -->
-<div class="pa-btn-group pa-btn-group--vertical pa-btn-group--center">
-  <button class="pa-btn pa-btn--secondary">Short</button>
-  <button class="pa-btn pa-btn--secondary">Medium Button</button>
-  <button class="pa-btn pa-btn--secondary">Longer Button Text</button>
-</div>
-
-<!-- Vertical End (right) -->
-<div class="pa-btn-group pa-btn-group--vertical pa-btn-group--end">
-  <button class="pa-btn pa-btn--secondary">Short</button>
-  <button class="pa-btn pa-btn--secondary">Medium Button</button>
-  <button class="pa-btn pa-btn--secondary">Longer Button Text</button>
-</div>
-
-<!-- Vertical Stretch (full-width) -->
-<div class="pa-btn-group pa-btn-group--vertical pa-btn-group--stretch">
-  <button class="pa-btn pa-btn--primary">Save</button>
-  <button class="pa-btn pa-btn--secondary">Cancel</button>
-  <button class="pa-btn pa-btn--danger">Delete</button>
-</div>
-
-
-<!-- BUTTON GROUP RESPONSIVE DIRECTION -->
-
-<!-- Horizontal on mobile, Vertical on md+ -->
-<div class="pa-btn-group pa-btn-group--md-vertical">
-  <button class="pa-btn pa-btn--primary">Save</button>
-  <button class="pa-btn pa-btn--secondary">Cancel</button>
-</div>
-
-<!-- Vertical on mobile/tablet, Horizontal on lg+ -->
-<div class="pa-btn-group pa-btn-group--vertical pa-btn-group--lg-horizontal">
-  <button class="pa-btn pa-btn--primary">Save</button>
-  <button class="pa-btn pa-btn--secondary">Cancel</button>
-</div>
-
-
-<!-- BUTTON GROUP NO-WRAP -->
-
-<!-- Prevent wrapping (single line, may overflow) -->
-<div class="pa-btn-group pa-btn-group--nowrap">
-  <button class="pa-btn pa-btn--primary">One</button>
-  <button class="pa-btn pa-btn--primary">Two</button>
-  <button class="pa-btn pa-btn--primary">Three</button>
-  <button class="pa-btn pa-btn--primary">Four</button>
-  <button class="pa-btn pa-btn--primary">Five</button>
-</div>
-
-
-<!-- SPLIT BUTTONS -->
-
-<!-- Basic Split Button (chevron rotates on open) -->
-<div class="pa-btn-split">
-  <button class="pa-btn pa-btn--primary">Save</button>
-  <button class="pa-btn pa-btn--primary pa-btn-split__toggle" onclick="toggleSplitMenu(event)">
-    <i class="fas fa-chevron-down text-2xs pa-btn-split__chevron"></i>
-  </button>
-  <div class="pa-btn-split__menu">
-    <button class="pa-btn-split__item">Save as Draft</button>
-    <button class="pa-btn-split__item">Save &amp; Close</button>
-  </div>
-</div>
-
-<!-- Split Button with Danger Item -->
-<div class="pa-btn-split">
-  <button class="pa-btn pa-btn--primary">Export</button>
-  <button class="pa-btn pa-btn--primary pa-btn-split__toggle" onclick="toggleSplitMenu(event)">
-    <i class="fas fa-chevron-down text-2xs pa-btn-split__chevron"></i>
-  </button>
-  <div class="pa-btn-split__menu">
-    <button class="pa-btn-split__item">Export as CSV</button>
-    <button class="pa-btn-split__item">Export as PDF</button>
-    <button class="pa-btn-split__item pa-btn-split__item--danger">Delete All</button>
-  </div>
-</div>
-
-<!-- Split Button - Upward Placement -->
-<div class="pa-btn-split" data-placement="top-end">
-  <button class="pa-btn pa-btn--primary">Upload</button>
-  <button class="pa-btn pa-btn--primary pa-btn-split__toggle" onclick="toggleSplitMenu(event)">
-    <i class="fas fa-chevron-up text-2xs pa-btn-split__chevron"></i>
-  </button>
-  <div class="pa-btn-split__menu">
-    <button class="pa-btn-split__item">Upload File</button>
-    <button class="pa-btn-split__item">Upload Folder</button>
-  </div>
-</div>
-
-<!-- Split Button - Custom Icon (no rotation) -->
-<div class="pa-btn-split">
-  <button class="pa-btn pa-btn--secondary">Share</button>
-  <button class="pa-btn pa-btn--secondary pa-btn-split__toggle" onclick="toggleSplitMenu(event)">
-    <i class="fas fa-ellipsis-vertical"></i>
-  </button>
-  <div class="pa-btn-split__menu">
-    <button class="pa-btn-split__item">Share via Email</button>
-    <button class="pa-btn-split__item">Share via Link</button>
-  </div>
-</div>
-
-<!-- Split Button - Caret Icon (rotates) -->
-<div class="pa-btn-split">
-  <button class="pa-btn pa-btn--danger">Delete</button>
-  <button class="pa-btn pa-btn--danger pa-btn-split__toggle" onclick="toggleSplitMenu(event)">
-    <i class="fas fa-caret-down pa-btn-split__chevron"></i>
-  </button>
-  <div class="pa-btn-split__menu">
-    <button class="pa-btn-split__item pa-btn-split__item--danger">Delete Permanently</button>
-    <button class="pa-btn-split__item">Move to Trash</button>
-  </div>
-</div>
-
-
-<!-- BUTTONS WITH ICONS -->
-
-<!-- Button with Icon (Text Icon) -->
-<button class="pa-btn pa-btn--primary">
-  <span class="pa-btn__icon">→</span>
-  Next
-</button>
-
-<!-- Button with Icon (Font Awesome) -->
-<button class="pa-btn pa-btn--primary">
-  <span class="pa-btn__icon"><i class="fa-solid fa-floppy-disk"></i></span>
-  Save
-</button>
-
-
-<!-- ICON-ONLY BUTTONS -->
-
-<!-- Icon Only - Default Size -->
-<button class="pa-btn pa-btn--primary pa-btn--icon-only" title="Save">
-  <i class="fa-solid fa-floppy-disk"></i>
-</button>
-
-<!-- Icon Only - XS (for tables) -->
-<button class="pa-btn pa-btn--primary pa-btn--icon-only pa-btn--xs" title="View">
-  👁️
-</button>
-
-<!-- Icon Only - SM -->
-<button class="pa-btn pa-btn--primary pa-btn--icon-only pa-btn--sm" title="Edit">
-  <i class="fa-solid fa-pen"></i>
-</button>
-
-<!-- Icon Only - LG -->
-<button class="pa-btn pa-btn--primary pa-btn--icon-only pa-btn--lg" title="Delete">
-  <i class="fa-solid fa-trash"></i>
-</button>
-
-<!-- Icon Only - XL -->
-<button class="pa-btn pa-btn--primary pa-btn--icon-only pa-btn--xl" title="Info">
-  <i class="fa-solid fa-circle-info"></i>
-</button>
-
-
-<!-- FIXED WIDTH BUTTONS -->
-<!-- Use minwr-* utilities for min-width in rem -->
-
-<!-- Fixed Width 6rem -->
-<button class="pa-btn pa-btn--primary minwr-6">
-  <span class="pa-btn__icon">✓</span>
-  OK
-</button>
-
-<!-- Fixed Width 8rem -->
-<button class="pa-btn pa-btn--success minwr-8">
-  <span class="pa-btn__icon">→</span>
-  Continue
-</button>
-
-<!-- Fixed Width with Truncation -->
-<!-- Use minwr-* + maxwr-* to constrain width, text-truncate on inner span for ellipsis -->
-<button class="pa-btn pa-btn--primary minwr-10 maxwr-10">
-  <span class="pa-btn__icon">✓</span>
-  <span class="text-truncate">Save All Changes</span>
-</button>
-
-<button class="pa-btn pa-btn--secondary minwr-10 maxwr-10">
-  <span class="pa-btn__icon">×</span>
-  <span class="text-truncate">Cancel and Go Back</span>
-</button>
-
-
-<!-- BUTTON ALIGNMENT -->
-
-<!-- Start Aligned (icon flush to inline-start) -->
-<button class="pa-btn pa-btn--primary minwr-8 pa-btn--align-start">
-  <span class="pa-btn__icon">✓</span>
-  Save
-</button>
-
-<!-- End Aligned (icon flush to inline-end) -->
-<button class="pa-btn pa-btn--primary minwr-8 pa-btn--align-end">
-  Save
-  <span class="pa-btn__icon">✓</span>
-</button>
-
-<!-- Center Aligned -->
-<button class="pa-btn pa-btn--primary minwr-8 pa-btn--align-center">
-  <span class="pa-btn__icon">✓</span>
-  Save
-</button>
-
-<!-- Justified (space-between) -->
-<button class="pa-btn pa-btn--primary minwr-8 pa-btn--align-justify">
-  <span class="pa-btn__icon">✓</span>
-  Save
-</button>
-
-
-<!-- INTERACTIVE BUTTONS -->
-
-<!-- Ripple Effect Button -->
-<button class="pa-btn pa-btn--primary pa-btn--ripple" data-ripple>
-  Primary Ripple
-</button>
-
-<!-- Button with Loading Demo -->
-<button class="pa-btn pa-btn--primary pa-btn--ripple" data-loading-demo data-ripple>
-  Save Changes
-</button>
+<!-- ================================
+     BUTTON SNIPPETS
+     Pure Admin Visual Framework
+     ================================ -->
+
+<!-- BASIC BUTTONS - Variants -->
+
+<!-- Primary Button -->
+<button class="pa-btn pa-btn--primary">Primary</button>
+
+<!-- Secondary Button -->
+<button class="pa-btn pa-btn--secondary">Secondary</button>
+
+<!-- Success Button -->
+<button class="pa-btn pa-btn--success">Success</button>
+
+<!-- Warning Button -->
+<button class="pa-btn pa-btn--warning">Warning</button>
+
+<!-- Danger Button -->
+<button class="pa-btn pa-btn--danger">Danger</button>
+
+<!-- Info Button -->
+<button class="pa-btn pa-btn--info">Info</button>
+
+<!-- Light Button -->
+<button class="pa-btn pa-btn--light">Light</button>
+
+<!-- Dark Button -->
+<button class="pa-btn pa-btn--dark">Dark</button>
+
+
+<!-- BUTTON SIZES -->
+
+<!-- Extra Small Button -->
+<button class="pa-btn pa-btn--primary pa-btn--xs">Extra Small</button>
+
+<!-- Small Button -->
+<button class="pa-btn pa-btn--primary pa-btn--sm">Small</button>
+
+<!-- Default Button -->
+<button class="pa-btn pa-btn--primary">Default</button>
+
+<!-- Large Button -->
+<button class="pa-btn pa-btn--primary pa-btn--lg">Large</button>
+
+<!-- Extra Large Button -->
+<button class="pa-btn pa-btn--primary pa-btn--xl">Extra Large</button>
+
+
+<!-- OUTLINE BUTTONS -->
+
+<!-- Outline Primary -->
+<button class="pa-btn pa-btn--outline-primary">Primary</button>
+
+<!-- Outline Secondary -->
+<button class="pa-btn pa-btn--outline-secondary">Secondary</button>
+
+<!-- Outline Success -->
+<button class="pa-btn pa-btn--outline-success">Success</button>
+
+<!-- Outline Warning -->
+<button class="pa-btn pa-btn--outline-warning">Warning</button>
+
+<!-- Outline Danger -->
+<button class="pa-btn pa-btn--outline-danger">Danger</button>
+
+<!-- Outline Info -->
+<button class="pa-btn pa-btn--outline-info">Info</button>
+
+
+<!-- BUTTON STATES -->
+
+<!-- Normal Button -->
+<button class="pa-btn pa-btn--primary">Normal</button>
+
+<!-- Disabled Button -->
+<button class="pa-btn pa-btn--primary" disabled>Disabled</button>
+
+<!-- Loading Button -->
+<button class="pa-btn pa-btn--primary pa-btn--loading">
+  <span class="pa-btn__spinner"></span>
+  Loading...
+</button>
+
+
+<!-- BLOCK BUTTONS -->
+
+<!-- Block Level Button -->
+<button class="pa-btn pa-btn--primary pa-btn--block">Block Level Button</button>
+
+
+<!-- BUTTON GROUPS -->
+
+<!-- Horizontal Button Group (default) -->
+<div class="pa-btn-group">
+  <button class="pa-btn pa-btn--secondary">Left</button>
+  <button class="pa-btn pa-btn--secondary">Middle</button>
+  <button class="pa-btn pa-btn--secondary">Right</button>
+</div>
+
+<!-- Vertical Button Group -->
+<div class="pa-btn-group pa-btn-group--vertical">
+  <button class="pa-btn pa-btn--secondary">Top</button>
+  <button class="pa-btn pa-btn--secondary">Middle</button>
+  <button class="pa-btn pa-btn--secondary">Bottom</button>
+</div>
+
+
+<!-- BUTTON GROUP GAP VARIANTS -->
+<!-- Use gap-* utility classes to adjust spacing -->
+
+<!-- Compact Gap (2px) -->
+<div class="pa-btn-group gap-2">
+  <button class="pa-btn pa-btn--primary">A</button>
+  <button class="pa-btn pa-btn--primary">B</button>
+  <button class="pa-btn pa-btn--primary">C</button>
+</div>
+
+<!-- Default Gap (3px) -->
+<div class="pa-btn-group">
+  <button class="pa-btn pa-btn--primary">A</button>
+  <button class="pa-btn pa-btn--primary">B</button>
+  <button class="pa-btn pa-btn--primary">C</button>
+</div>
+
+<!-- Loose Gap (8px) -->
+<div class="pa-btn-group gap-8">
+  <button class="pa-btn pa-btn--primary">A</button>
+  <button class="pa-btn pa-btn--primary">B</button>
+  <button class="pa-btn pa-btn--primary">C</button>
+</div>
+
+
+<!-- BUTTON GROUP VERTICAL ALIGNMENT -->
+
+<!-- Vertical Left (default) -->
+<div class="pa-btn-group pa-btn-group--vertical">
+  <button class="pa-btn pa-btn--secondary">Short</button>
+  <button class="pa-btn pa-btn--secondary">Medium Button</button>
+  <button class="pa-btn pa-btn--secondary">Longer Button Text</button>
+</div>
+
+<!-- Vertical Center -->
+<div class="pa-btn-group pa-btn-group--vertical pa-btn-group--center">
+  <button class="pa-btn pa-btn--secondary">Short</button>
+  <button class="pa-btn pa-btn--secondary">Medium Button</button>
+  <button class="pa-btn pa-btn--secondary">Longer Button Text</button>
+</div>
+
+<!-- Vertical End (right) -->
+<div class="pa-btn-group pa-btn-group--vertical pa-btn-group--end">
+  <button class="pa-btn pa-btn--secondary">Short</button>
+  <button class="pa-btn pa-btn--secondary">Medium Button</button>
+  <button class="pa-btn pa-btn--secondary">Longer Button Text</button>
+</div>
+
+<!-- Vertical Stretch (full-width) -->
+<div class="pa-btn-group pa-btn-group--vertical pa-btn-group--stretch">
+  <button class="pa-btn pa-btn--primary">Save</button>
+  <button class="pa-btn pa-btn--secondary">Cancel</button>
+  <button class="pa-btn pa-btn--danger">Delete</button>
+</div>
+
+
+<!-- BUTTON GROUP RESPONSIVE DIRECTION -->
+
+<!-- Horizontal on mobile, Vertical on md+ -->
+<div class="pa-btn-group pa-btn-group--md-vertical">
+  <button class="pa-btn pa-btn--primary">Save</button>
+  <button class="pa-btn pa-btn--secondary">Cancel</button>
+</div>
+
+<!-- Vertical on mobile/tablet, Horizontal on lg+ -->
+<div class="pa-btn-group pa-btn-group--vertical pa-btn-group--lg-horizontal">
+  <button class="pa-btn pa-btn--primary">Save</button>
+  <button class="pa-btn pa-btn--secondary">Cancel</button>
+</div>
+
+
+<!-- BUTTON GROUP NO-WRAP -->
+
+<!-- Prevent wrapping (single line, may overflow) -->
+<div class="pa-btn-group pa-btn-group--nowrap">
+  <button class="pa-btn pa-btn--primary">One</button>
+  <button class="pa-btn pa-btn--primary">Two</button>
+  <button class="pa-btn pa-btn--primary">Three</button>
+  <button class="pa-btn pa-btn--primary">Four</button>
+  <button class="pa-btn pa-btn--primary">Five</button>
+</div>
+
+
+<!-- SPLIT BUTTONS -->
+
+<!-- Basic Split Button (chevron rotates on open) -->
+<div class="pa-btn-split">
+  <button class="pa-btn pa-btn--primary">Save</button>
+  <button class="pa-btn pa-btn--primary pa-btn-split__toggle" onclick="toggleSplitMenu(event)">
+    <i class="fas fa-chevron-down text-2xs pa-btn-split__chevron"></i>
+  </button>
+  <div class="pa-btn-split__menu">
+    <div class="pa-btn-split__menu-inner">
+    <button class="pa-btn-split__item">Save as Draft</button>
+    <button class="pa-btn-split__item">Save &amp; Close</button>
+    </div>
+  </div>
+</div>
+
+<!-- Split Button with Danger Item -->
+<div class="pa-btn-split">
+  <button class="pa-btn pa-btn--primary">Export</button>
+  <button class="pa-btn pa-btn--primary pa-btn-split__toggle" onclick="toggleSplitMenu(event)">
+    <i class="fas fa-chevron-down text-2xs pa-btn-split__chevron"></i>
+  </button>
+  <div class="pa-btn-split__menu">
+    <div class="pa-btn-split__menu-inner">
+    <button class="pa-btn-split__item">Export as CSV</button>
+    <button class="pa-btn-split__item">Export as PDF</button>
+    <button class="pa-btn-split__item pa-btn-split__item--danger">Delete All</button>
+    </div>
+  </div>
+</div>
+
+<!-- Split Button - Upward Placement -->
+<div class="pa-btn-split" data-placement="top-end">
+  <button class="pa-btn pa-btn--primary">Upload</button>
+  <button class="pa-btn pa-btn--primary pa-btn-split__toggle" onclick="toggleSplitMenu(event)">
+    <i class="fas fa-chevron-up text-2xs pa-btn-split__chevron"></i>
+  </button>
+  <div class="pa-btn-split__menu">
+    <div class="pa-btn-split__menu-inner">
+    <button class="pa-btn-split__item">Upload File</button>
+    <button class="pa-btn-split__item">Upload Folder</button>
+    </div>
+  </div>
+</div>
+
+<!-- Split Button - Custom Icon (no rotation) -->
+<div class="pa-btn-split">
+  <button class="pa-btn pa-btn--secondary">Share</button>
+  <button class="pa-btn pa-btn--secondary pa-btn-split__toggle" onclick="toggleSplitMenu(event)">
+    <i class="fas fa-ellipsis-vertical"></i>
+  </button>
+  <div class="pa-btn-split__menu">
+    <div class="pa-btn-split__menu-inner">
+    <button class="pa-btn-split__item">Share via Email</button>
+    <button class="pa-btn-split__item">Share via Link</button>
+    </div>
+  </div>
+</div>
+
+<!-- Split Button - Caret Icon (rotates) -->
+<div class="pa-btn-split">
+  <button class="pa-btn pa-btn--danger">Delete</button>
+  <button class="pa-btn pa-btn--danger pa-btn-split__toggle" onclick="toggleSplitMenu(event)">
+    <i class="fas fa-caret-down pa-btn-split__chevron"></i>
+  </button>
+  <div class="pa-btn-split__menu">
+    <div class="pa-btn-split__menu-inner">
+    <button class="pa-btn-split__item pa-btn-split__item--danger">Delete Permanently</button>
+    <button class="pa-btn-split__item">Move to Trash</button>
+    </div>
+  </div>
+</div>
+
+
+<!-- BUTTONS WITH ICONS -->
+
+<!-- Button with Icon (Text Icon) -->
+<button class="pa-btn pa-btn--primary">
+  <span class="pa-btn__icon">→</span>
+  Next
+</button>
+
+<!-- Button with Icon (Font Awesome) -->
+<button class="pa-btn pa-btn--primary">
+  <span class="pa-btn__icon"><i class="fa-solid fa-floppy-disk"></i></span>
+  Save
+</button>
+
+
+<!-- ICON-ONLY BUTTONS -->
+
+<!-- Icon Only - Default Size -->
+<button class="pa-btn pa-btn--primary pa-btn--icon-only" title="Save">
+  <i class="fa-solid fa-floppy-disk"></i>
+</button>
+
+<!-- Icon Only - XS (for tables) -->
+<button class="pa-btn pa-btn--primary pa-btn--icon-only pa-btn--xs" title="View">
+  👁️
+</button>
+
+<!-- Icon Only - SM -->
+<button class="pa-btn pa-btn--primary pa-btn--icon-only pa-btn--sm" title="Edit">
+  <i class="fa-solid fa-pen"></i>
+</button>
+
+<!-- Icon Only - LG -->
+<button class="pa-btn pa-btn--primary pa-btn--icon-only pa-btn--lg" title="Delete">
+  <i class="fa-solid fa-trash"></i>
+</button>
+
+<!-- Icon Only - XL -->
+<button class="pa-btn pa-btn--primary pa-btn--icon-only pa-btn--xl" title="Info">
+  <i class="fa-solid fa-circle-info"></i>
+</button>
+
+
+<!-- FIXED WIDTH BUTTONS -->
+<!-- Use minwr-* utilities for min-width in rem -->
+
+<!-- Fixed Width 6rem -->
+<button class="pa-btn pa-btn--primary minwr-6">
+  <span class="pa-btn__icon">✓</span>
+  OK
+</button>
+
+<!-- Fixed Width 8rem -->
+<button class="pa-btn pa-btn--success minwr-8">
+  <span class="pa-btn__icon">→</span>
+  Continue
+</button>
+
+<!-- Fixed Width with Truncation -->
+<!-- Use minwr-* + maxwr-* to constrain width, text-truncate on inner span for ellipsis -->
+<button class="pa-btn pa-btn--primary minwr-10 maxwr-10">
+  <span class="pa-btn__icon">✓</span>
+  <span class="text-truncate">Save All Changes</span>
+</button>
+
+<button class="pa-btn pa-btn--secondary minwr-10 maxwr-10">
+  <span class="pa-btn__icon">×</span>
+  <span class="text-truncate">Cancel and Go Back</span>
+</button>
+
+
+<!-- BUTTON ALIGNMENT -->
+
+<!-- Start Aligned (icon flush to inline-start) -->
+<button class="pa-btn pa-btn--primary minwr-8 pa-btn--align-start">
+  <span class="pa-btn__icon">✓</span>
+  Save
+</button>
+
+<!-- End Aligned (icon flush to inline-end) -->
+<button class="pa-btn pa-btn--primary minwr-8 pa-btn--align-end">
+  Save
+  <span class="pa-btn__icon">✓</span>
+</button>
+
+<!-- Center Aligned -->
+<button class="pa-btn pa-btn--primary minwr-8 pa-btn--align-center">
+  <span class="pa-btn__icon">✓</span>
+  Save
+</button>
+
+<!-- Justified (space-between) -->
+<button class="pa-btn pa-btn--primary minwr-8 pa-btn--align-justify">
+  <span class="pa-btn__icon">✓</span>
+  Save
+</button>
+
+
+<!-- INTERACTIVE BUTTONS -->
+
+<!-- Ripple Effect Button -->
+<button class="pa-btn pa-btn--primary pa-btn--ripple" data-ripple>
+  Primary Ripple
+</button>
+
+<!-- Button with Loading Demo -->
+<button class="pa-btn pa-btn--primary pa-btn--ripple" data-loading-demo data-ripple>
+  Save Changes
+</button>