From 689f84ab53a548c949a6b6e4f65195cb3a6a2b38 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 17 Dec 2025 17:40:11 -0500
Subject: [PATCH] Refactor button components to use Proxmox UI library

- Updated button components across various views to utilize the new Proxmox UI button structure.
- Replaced instances of <x-button.primary> and <x-button.secondary> with <x-proxmox::ui.button> for consistency and improved styling.
- Adjusted button attributes and loading states to align with the new component design.
- Ensured that all button functionalities remain intact while enhancing the overall UI consistency.
---
 .../Servers/Proxmox/views/backups.blade.php   | 52 ++++++-----
 .../Proxmox/views/backups/create.blade.php    | 14 +--
 .../Proxmox/views/boot-order.blade.php        | 42 ++++-----
 .../Proxmox/views/cloud-init.blade.php        | 76 ++++++++--------
 .../Proxmox/views/components/layout.blade.php | 48 +++++-----
 .../Servers/Proxmox/views/display.blade.php   | 10 +--
 .../Servers/Proxmox/views/firewall.blade.php  |  2 +-
 .../Servers/Proxmox/views/network.blade.php   | 88 +++++++++----------
 .../Servers/Proxmox/views/overview.blade.php  | 43 +++++----
 .../Servers/Proxmox/views/reinstall.blade.php | 43 +++++----
 .../Proxmox/views/statistics.blade.php        | 24 ++---
 .../Servers/Proxmox/views/subdomain.blade.php | 33 ++++---
 .../Servers/Proxmox/views/system.blade.php    | 20 ++---
 13 files changed, 245 insertions(+), 250 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/backups.blade.php b/extensions/Servers/Proxmox/views/backups.blade.php
index 7221df05d..e9b96a87f 100644
--- a/extensions/Servers/Proxmox/views/backups.blade.php
+++ b/extensions/Servers/Proxmox/views/backups.blade.php
@@ -57,14 +57,20 @@
                                 <td class="px-3 py-3">{{ date('Y-m-d H:i', $backup->ctime) }}</td>
                                 <td class="px-3 py-3">
                                     <div class="flex flex-wrap items-center justify-center gap-1">
-                                        <button @click="$wire.set('showRestore', true); $wire.set('volid', '{{ $backup->volid }}')"
-                                            class="bg-background border border-neutral px-2 py-1 rounded text-xs font-semibold flex items-center gap-1">
-                                            <x-ri-checkbox-circle-fill class="w-3 h-3"/> Restore
-                                        </button>
-                                        <button wire:click="promptDelete('{{ $backup->volid }}')"
-                                            class="bg-background border border-neutral px-2 py-1 rounded text-xs font-semibold flex items-center gap-1 text-error">
-                                            <x-ri-delete-bin-fill class="w-3 h-3"/> Delete
-                                        </button>
+                                        <x-proxmox::ui.button 
+                                            @click="$wire.set('showRestore', true); $wire.set('volid', '{{ $backup->volid }}')"
+                                            variant="secondary"
+                                            size="sm"
+                                            icon="ri-checkbox-circle-fill">
+                                            Restore
+                                        </x-proxmox::ui.button>
+                                        <x-proxmox::ui.button 
+                                            wire:click="promptDelete('{{ $backup->volid }}')"
+                                            variant="danger"
+                                            size="sm"
+                                            icon="ri-delete-bin-fill">
+                                            Delete
+                                        </x-proxmox::ui.button>
                                     </div>
                                 </td>
                             </tr>
@@ -90,14 +96,13 @@
         </div>
 
         <div class="flex flex-row gap-4 mt-4">
-            <x-button.secondary wire:click="$set('showRestore', false)">Cancel</x-button.secondary>
-            <x-button.primary wire:click="restoreBackup" wire:loading.attr="disabled" wire:loading.class="opacity-50"
-                wire:loading.attr="aria-busy" wire:target="restoreBackup">
-                <x-loading target="restoreBackup" />
-                <div wire:loading.remove wire:target="restoreBackup">
-                    Restore
-                </div>
-            </x-button.primary>
+            <x-proxmox::ui.button wire:click="$set('showRestore', false)" variant="secondary">
+                Cancel
+            </x-proxmox::ui.button>
+            <x-proxmox::ui.button wire:click="restoreBackup" wire:loading.attr="disabled" variant="primary">
+                <span wire:loading.remove wire:target="restoreBackup">Restore</span>
+                <span wire:loading wire:target="restoreBackup">Restoring...</span>
+            </x-proxmox::ui.button>
         </div>
     </x-modal>
     @endif
@@ -113,14 +118,13 @@
         </div>
 
         <div class="flex flex-row gap-4 mt-4">
-            <x-button.secondary wire:click="$set('showDelete', false)">Cancel</x-button.secondary>
-            <x-button.danger wire:click="deleteBackup" wire:loading.attr="disabled" wire:loading.class="opacity-50"
-                wire:loading.attr="aria-busy" wire:target="deleteBackup">
-                <x-loading target="deleteBackup" />
-                <div wire:loading.remove wire:target="deleteBackup">
-                    Delete Backup
-                </div>
-            </x-button.danger>
+            <x-proxmox::ui.button wire:click="$set('showDelete', false)" variant="secondary">
+                Cancel
+            </x-proxmox::ui.button>
+            <x-proxmox::ui.button wire:click="deleteBackup" wire:loading.attr="disabled" variant="danger">
+                <span wire:loading.remove wire:target="deleteBackup">Delete Backup</span>
+                <span wire:loading wire:target="deleteBackup">Deleting...</span>
+            </x-proxmox::ui.button>
         </div>
     </x-modal>
     @endif
diff --git a/extensions/Servers/Proxmox/views/backups/create.blade.php b/extensions/Servers/Proxmox/views/backups/create.blade.php
index d6cfac11b..71ae26509 100644
--- a/extensions/Servers/Proxmox/views/backups/create.blade.php
+++ b/extensions/Servers/Proxmox/views/backups/create.blade.php
@@ -1,11 +1,11 @@
 <div class="" wire:poll.10s="pollEligibility">
-    <x-button.primary
+    <x-proxmox::ui.button
         wire:click="$set('visible', true)"
         :disabled="!$this->canCreateBackup"
-        class="disabled:cursor-not-allowed">
+        class="disabled:cursor-not-allowed" variant="primary">
         <x-ri-add-circle-fill class="size-4" />
         Create Backup
-    </x-button.primary>
+    </x-proxmox::ui.button>
     @if($visible)
         <x-modal id="backup" title="Backup Server" open>
             <div class="flex flex-col gap-4">
@@ -26,15 +26,15 @@
             </div>
         
             <div class="flex flex-row gap-4 mt-4">
-                <x-button.secondary wire:click="$set('visible', false)">Cancel</x-button.secondary>
-                <x-button.primary wire:click="backup" wire:loading.attr="disabled" wire:loading.class="opacity-50" wire:loading.attr="aria-busy" wire:target="backup"
+                <x-proxmox::ui.button wire:click="$set('visible', false)" variant="secondary">Cancel</x-proxmox::ui.button>
+                <x-proxmox::ui.button wire:click="backup" wire:loading.attr="disabled" wire:loading.class="opacity-50" wire:loading.attr="aria-busy" wire:target="backup"
                     :disabled="!$this->canCreateBackup"
-                    class="disabled:cursor-not-allowed">
+                    class="disabled:cursor-not-allowed" variant="primary">
                     <x-loading target="backup" />
                     <div wire:loading.remove wire:target="backup">
                         Create backup
                     </div>
-                </x-button.primary>
+                </x-proxmox::ui.button>
             </div>
         </x-modal>
     @endif
diff --git a/extensions/Servers/Proxmox/views/boot-order.blade.php b/extensions/Servers/Proxmox/views/boot-order.blade.php
index 40b751842..789982051 100644
--- a/extensions/Servers/Proxmox/views/boot-order.blade.php
+++ b/extensions/Servers/Proxmox/views/boot-order.blade.php
@@ -213,12 +213,12 @@
                 </div>
 
                 <div class="flex justify-center">
-                    <x-button.primary wire:click="createCdDrive" wire:loading.attr="disabled" 
+                    <x-proxmox::ui.button wire:click="createCdDrive" wire:loading.attr="disabled" 
                                       class="w-full sm:w-auto"
-                                      :disabled="count($cdDrives) >= 2">
+                                      :disabled="count($cdDrives) >= 2" variant="primary">
                         <x-loading target="createCdDrive" />
                         Create CD/DVD-ROM Drive
-                    </x-button.primary>
+                    </x-proxmox::ui.button>
                 </div>
             </div>
         @endif
@@ -320,22 +320,22 @@
                         </div>
                     </div>
                     <div class="flex gap-2 w-full sm:w-auto min-w-0">
-                        <x-button.primary wire:click="applyIso('{{ $drive }}')" 
+                        <x-proxmox::ui.button wire:click="applyIso('{{ $drive }}')" 
                                           wire:loading.attr="disabled"
                                           class="flex-1 sm:flex-initial"
-                                          :disabled="($currentIsos[$drive] ?? 'none') === ($selectedIsos[$drive] ?? 'none')">
+                                          :disabled="($currentIsos[$drive] ?? 'none') === ($selectedIsos[$drive] ?? 'none')" variant="primary">
                             <x-loading target="applyIso('{{ $drive }}')" />
                             <span wire:loading.remove wire:target="applyIso('{{ $drive }}')">Apply</span>
                             <span wire:loading wire:target="applyIso('{{ $drive }}')">Applying...</span>
-                        </x-button.primary>
-                        <x-button.danger wire:click="ejectIso('{{ $drive }}')" 
+                        </x-proxmox::ui.button>
+                        <x-proxmox::ui.button wire:click="ejectIso('{{ $drive }}')" 
                                          wire:loading.attr="disabled"
                                          class="flex-1 sm:flex-initial"
-                                         :disabled="!isset($currentIsos[$drive]) || $currentIsos[$drive] === 'none'">
+                                         :disabled="!isset($currentIsos[$drive]) || $currentIsos[$drive] === 'none'" variant="danger">
                             <x-loading target="ejectIso('{{ $drive }}')" />
                             <span wire:loading.remove wire:target="ejectIso('{{ $drive }}')">Eject</span>
                             <span wire:loading wire:target="ejectIso('{{ $drive }}')">Ejecting...</span>
-                        </x-button.danger>
+                        </x-proxmox::ui.button>
                     </div>
                 </div>
                 <p class="text-xs text-base/50">
@@ -424,11 +424,11 @@
                 </div>
 
                 <div class="flex flex-col gap-3">
-                    <x-button.primary 
+                    <x-proxmox::ui.button 
                         onclick="window.open('https://billing.virtnet.bond/tickets/create', '_blank')" 
-                        class="w-full sm:w-auto">
+                        class="w-full sm:w-auto" variant="primary">
                         Request ISO
-                    </x-button.primary>
+                    </x-proxmox::ui.button>
                     
                     <div class="bg-info/10 border border-info/30 rounded-lg p-2 sm:p-3">
                         <div class="flex items-start gap-2">
@@ -664,17 +664,17 @@
 
         <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
             <div class="flex-1 w-full sm:w-auto">
-                <x-button.secondary wire:click="refreshBootConfiguration" wire:loading.attr="disabled"
-                                    class="w-full">
+                <x-proxmox::ui.button wire:click="refreshBootConfiguration" wire:loading.attr="disabled"
+                                    class="w-full" variant="secondary">
                     <x-loading target="refreshBootConfiguration" />
                     Refresh
-                </x-button.secondary>
+                </x-proxmox::ui.button>
             </div>
             <div class="flex items-center gap-2 flex-1 w-full sm:w-auto">
-                <x-button.secondary wire:click="resetOrder" :disabled="!$this->hasChanges"
-                                    class="flex-1">
+                <x-proxmox::ui.button wire:click="resetOrder" :disabled="!$this->hasChanges"
+                                    class="flex-1" variant="secondary">
                     Reset to current
-                </x-button.secondary>
+                </x-proxmox::ui.button>
                 <div class="relative" x-data="{ open: false }" x-cloak>
                     <button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors" :disabled="!$this->hasChanges">
                         <x-ri-question-line class="size-4" />
@@ -729,11 +729,11 @@
                 </div>
             </div>
             <div class="flex items-center gap-2 flex-1 w-full sm:w-auto">
-                <x-button.primary wire:click="saveOrder" wire:loading.attr="disabled" :disabled="!$this->hasChanges"
-                                  class="flex-1">
+                <x-proxmox::ui.button wire:click="saveOrder" wire:loading.attr="disabled" :disabled="!$this->hasChanges"
+                                  class="flex-1" variant="primary">
                     <x-loading target="saveOrder" />
                     Save boot order
-                </x-button.primary>
+                </x-proxmox::ui.button>
                 <div class="relative" x-data="{ open: false }" x-cloak>
                     <button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors" :disabled="!$this->hasChanges">
                         <x-ri-question-line class="size-4" />
diff --git a/extensions/Servers/Proxmox/views/cloud-init.blade.php b/extensions/Servers/Proxmox/views/cloud-init.blade.php
index 7d3a2a44a..43e347a82 100644
--- a/extensions/Servers/Proxmox/views/cloud-init.blade.php
+++ b/extensions/Servers/Proxmox/views/cloud-init.blade.php
@@ -184,12 +184,12 @@
                                     <p class="text-xs text-gray-500 dark:text-gray-400">Leave blank to retain the template default user.</p>
                                 </div>
                                 <div class="flex justify-end gap-2">
-                                    <x-button.secondary type="button" @click="showCiUserModal = false">
+                                    <x-proxmox::ui.button type="button" @click="showCiUserModal = false" variant="secondary">
                                         Cancel
-                                    </x-button.secondary>
-                                    <x-button.primary type="button" @click="showCiUserModal = false">
+                                    </x-proxmox::ui.button>
+                                    <x-proxmox::ui.button type="button" @click="showCiUserModal = false" variant="primary">
                                         Done
-                                    </x-button.primary>
+                                    </x-proxmox::ui.button>
                                 </div>
                             </div>
                         </div>
@@ -298,15 +298,15 @@
                                     </p>
                                 </div>
                                 <div class="flex justify-end gap-2">
-                                    <x-button.secondary type="button" @click="showPasswordEditModal = false; $wire.cancelEditingPassword()">
+                                    <x-proxmox::ui.button type="button" @click="showPasswordEditModal = false; $wire.cancelEditingPassword()" variant="secondary">
                                         Cancel
-                                    </x-button.secondary>
-                                    <x-button.primary type="button" wire:click="updatePassword">
+                                    </x-proxmox::ui.button>
+                                    <x-proxmox::ui.button type="button" wire:click="updatePassword" variant="primary">
                                         Save
-                                    </x-button.primary>
-                                    <x-button.primary type="button" wire:click="applyPassword">
+                                    </x-proxmox::ui.button>
+                                    <x-proxmox::ui.button type="button" wire:click="applyPassword" variant="primary">
                                         Save &amp; Apply
-                                    </x-button.primary>
+                                    </x-proxmox::ui.button>
                                 </div>
                             </div>
                         </div>
@@ -372,9 +372,9 @@
                             @endforelse
                         </div>
                         <div class="flex flex-col gap-2">
-                            <x-button.secondary type="button" @click="showAddKeyModal = true">
+                            <x-proxmox::ui.button type="button" @click="showAddKeyModal = true" variant="secondary">
                                 Add Key
-                            </x-button.secondary>
+                            </x-proxmox::ui.button>
                         </div>
                         <p class="text-xs text-gray-500 dark:text-gray-400">Add as many keys as needed. The platform management key is always kept but never shown.</p>
 
@@ -398,14 +398,14 @@
                                               placeholder="ssh-ed25519 AAAA... user@host"></textarea>
                                 </div>
                                 <div class="flex justify-end gap-2">
-                                    <x-button.secondary type="button" @click="showAddKeyModal = false">
+                                    <x-proxmox::ui.button type="button" @click="showAddKeyModal = false" variant="secondary">
                                         Cancel
-                                    </x-button.secondary>
-                                    <x-button.primary type="button"
+                                    </x-proxmox::ui.button>
+                                    <x-proxmox::ui.button type="button"
                                                       wire:click="addSshKey"
-                                                      @click="showAddKeyModal = false">
+                                                      @click="showAddKeyModal = false" variant="primary">
                                         Add Key
-                                    </x-button.primary>
+                                    </x-proxmox::ui.button>
                                 </div>
                             </div>
                         </div>
@@ -566,12 +566,12 @@
                                 Leave fields blank to remove static addressing. If both IPv4 fields are empty, cloud-init omits the IPv4 stanza.
                             </p>
                             <div class="flex justify-end gap-2">
-                                <x-button.secondary wire:click="cancelEditingNetwork" @click="showNetworkModal = false">
+                                <x-proxmox::ui.button wire:click="cancelEditingNetwork" @click="showNetworkModal = false" variant="secondary">
                                     Cancel
-                                </x-button.secondary>
-                                <x-button.primary wire:click="saveNetwork" @click="showNetworkModal = false">
+                                </x-proxmox::ui.button>
+                                <x-proxmox::ui.button wire:click="saveNetwork" @click="showNetworkModal = false" variant="primary">
                                     Save
-                                </x-button.primary>
+                                </x-proxmox::ui.button>
                             </div>
                         </div>
                     </div>
@@ -671,12 +671,12 @@
                                     <p class="text-xs text-gray-500 dark:text-gray-400">Leave blank to use system default. Appended to short hostnames for resolution.</p>
                                 </div>
                                 <div class="flex justify-end gap-2">
-                                    <x-button.secondary type="button" @click="showDnsDomainModal = false">
+                                    <x-proxmox::ui.button type="button" @click="showDnsDomainModal = false" variant="secondary">
                                         Cancel
-                                    </x-button.secondary>
-                                    <x-button.primary type="button" @click="showDnsDomainModal = false">
+                                    </x-proxmox::ui.button>
+                                    <x-proxmox::ui.button type="button" @click="showDnsDomainModal = false" variant="primary">
                                         Done
-                                    </x-button.primary>
+                                    </x-proxmox::ui.button>
                                 </div>
                             </div>
                         </div>
@@ -698,9 +698,9 @@
                             @endforelse
                         </div>
                         <div class="flex flex-col gap-2">
-                            <x-button.secondary type="button" @click="showAddDnsModal = true">
+                            <x-proxmox::ui.button type="button" @click="showAddDnsModal = true" variant="secondary">
                                 Add Nameserver
-                            </x-button.secondary>
+                            </x-proxmox::ui.button>
                         </div>
                         <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Entries are applied in order. Add one IPv4/IPv6 resolver per line.</p>
 
@@ -787,14 +787,14 @@
                                     </div>
                                 </div>
                                 <div class="flex justify-end gap-2">
-                                    <x-button.secondary type="button" @click="showAddDnsModal = false">
+                                    <x-proxmox::ui.button type="button" @click="showAddDnsModal = false" variant="secondary">
                                         Cancel
-                                    </x-button.secondary>
-                                    <x-button.primary type="button"
+                                    </x-proxmox::ui.button>
+                                    <x-proxmox::ui.button type="button"
                                                       wire:click="addDnsServer"
-                                                      @click="showAddDnsModal = false">
+                                                      @click="showAddDnsModal = false" variant="primary">
                                         Add Nameserver
-                                    </x-button.primary>
+                                    </x-proxmox::ui.button>
                                 </div>
                             </div>
                         </div>
@@ -874,17 +874,17 @@
         </div>
 
         <div class="flex items-center gap-2 overflow-x-auto">
-            <x-button.secondary wire:click="refreshCloudInit" wire:loading.attr="disabled">
+            <x-proxmox::ui.button wire:click="refreshCloudInit" wire:loading.attr="disabled" variant="secondary">
                 <x-loading target="refreshCloudInit" />
                 Refresh
-            </x-button.secondary>
-            <x-button.secondary wire:click="resetCloudInit" :disabled="!$this->hasChanges">
+            </x-proxmox::ui.button>
+            <x-proxmox::ui.button wire:click="resetCloudInit" :disabled="!$this->hasChanges" variant="secondary">
                 Reset
-            </x-button.secondary>
-            <x-button.primary wire:click="applyCloudInit" wire:loading.attr="disabled" :disabled="!$this->hasChanges">
+            </x-proxmox::ui.button>
+            <x-proxmox::ui.button wire:click="applyCloudInit" wire:loading.attr="disabled" :disabled="!$this->hasChanges" variant="primary">
                 <x-loading target="applyCloudInit" />
                 Apply &amp; Regenerate
-            </x-button.primary>
+            </x-proxmox::ui.button>
         </div>
     </div>
 </x-proxmox::layout>
diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index 5bae5e700..b5f2eaebc 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -1229,87 +1229,87 @@
 
                 
                     <div class="hidden lg:flex flex-row gap-2 ml-auto justify-end items-center">
-                        <x-button.primary wire:click="do('start')" class="disabled:cursor-not-allowed"
+                        <x-proxmox::ui.button wire:click="do('start')" class="disabled:cursor-not-allowed"
                             wire:loading.attr="disabled" wire:loading.class="opacity-50 cursor-not-allowed"
-                            :disabled="$vmStatus !== 'stopped'">
+                            :disabled="$vmStatus !== 'stopped'" variant="primary">
                             <x-loading target="do('start')" />
                             <x-ri-play-fill class="size-4" />
                             <div wire:loading.remove wire:target="do('start')">
                                 Start
                             </div>
-                        </x-button.primary>
+                        </x-proxmox::ui.button>
                         <div x-show="isAdvancedView" x-transition>
-                            <x-button.secondary wire:click="do('shutdown')" class="text-nowrap disabled:cursor-not-allowed"
+                            <x-proxmox::ui.button wire:click="do('shutdown')" class="text-nowrap disabled:cursor-not-allowed"
                                 wire:loading.attr="disabled" wire:loading.class="opacity-50 cursor-not-allowed"
-                                :disabled="$vmStatus !== 'running'">
+                                :disabled="$vmStatus !== 'running'" variant="secondary">
                                 <x-loading target="do('shutdown')" />
                                 <x-ri-stop-fill class="size-4" />
                                 <div wire:loading.remove wire:target="do('shutdown')">
                                     Stop (ACPI)
                                 </div>
-                            </x-button.secondary>
+                            </x-proxmox::ui.button>
                         </div>
                         <div x-show="isAdvancedView" x-transition>
-                            <x-button.secondary wire:click="do('reboot')" class="text-nowrap disabled:cursor-not-allowed"
-                                :disabled="$vmStatus !== 'running'">
+                            <x-proxmox::ui.button wire:click="do('reboot')" class="text-nowrap disabled:cursor-not-allowed"
+                                :disabled="$vmStatus !== 'running'" variant="secondary">
                                 <x-loading target="do('reboot')" />
                                 <x-ri-loop-left-line class="size-4" />
                                 <div wire:loading.remove wire:target="do('reboot')">
                                     Reboot (ACPI)
                                 </div>
-                            </x-button.secondary>
+                            </x-proxmox::ui.button>
                         </div>
-                        <x-button.danger wire:click="do('stop')" class="text-nowrap disabled:cursor-not-allowed"
-                            :disabled="$vmStatus !== 'running'">
+                        <x-proxmox::ui.button wire:click="do('stop')" class="text-nowrap disabled:cursor-not-allowed"
+                            :disabled="$vmStatus !== 'running'" variant="danger">
                             <x-loading target="do('stop')" />
                             <x-ri-shut-down-line class="size-4" />
                             <div wire:loading.remove wire:target="do('stop')">
                                 Power Off
                             </div>
-                        </x-button.danger>
+                        </x-proxmox::ui.button>
                     </div>
 
                     <div class="flex lg:hidden w-full flex-col gap-2">
                         <div class="flex flex-col gap-2 w-full">
-                            <x-button.primary wire:click="do('start')" class="w-full disabled:cursor-not-allowed"
+                            <x-proxmox::ui.button wire:click="do('start')" class="w-full disabled:cursor-not-allowed"
                                 wire:loading.attr="disabled" wire:loading.class="opacity-50 cursor-not-allowed"
-                                :disabled="$vmStatus !== 'stopped'">
+                                :disabled="$vmStatus !== 'stopped'" variant="primary">
                                 <x-loading target="do('start')" />
                                 <x-ri-play-fill class="size-4" />
                                 <div wire:loading.remove wire:target="do('start')">
                                     Start
                                 </div>
-                            </x-button.primary>
+                            </x-proxmox::ui.button>
                             <div x-show="isAdvancedView" x-transition>
-                                <x-button.secondary wire:click="do('shutdown')" class="w-full text-nowrap disabled:cursor-not-allowed"
+                                <x-proxmox::ui.button wire:click="do('shutdown')" class="w-full text-nowrap disabled:cursor-not-allowed"
                                     wire:loading.attr="disabled" wire:loading.class="opacity-50 cursor-not-allowed"
-                                    :disabled="$vmStatus !== 'running'">
+                                    :disabled="$vmStatus !== 'running'" variant="secondary">
                                     <x-loading target="do('shutdown')" />
                                     <x-ri-stop-fill class="size-4" />
                                     <div wire:loading.remove wire:target="do('shutdown')">
                                         Stop (ACPI)
                                     </div>
-                                </x-button.secondary>
+                                </x-proxmox::ui.button>
                             </div>
                             <div x-show="isAdvancedView" x-transition>
-                                <x-button.secondary wire:click="do('reboot')" class="w-full text-nowrap disabled:cursor-not-allowed"
-                                    :disabled="$vmStatus !== 'running'">
+                                <x-proxmox::ui.button wire:click="do('reboot')" class="w-full text-nowrap disabled:cursor-not-allowed"
+                                    :disabled="$vmStatus !== 'running'" variant="secondary">
                                     <x-loading target="do('reboot')" />
                                     <x-ri-loop-left-line class="size-4" />
                                     <div wire:loading.remove wire:target="do('reboot')">
                                         Reboot (ACPI)
                                     </div>
-                                </x-button.secondary>
+                                </x-proxmox::ui.button>
                             </div>
-                            <x-button.danger wire:click="do('stop')"
+                            <x-proxmox::ui.button wire:click="do('stop')"
                                 class="text-nowrap w-full disabled:cursor-not-allowed"
-                                :disabled="$vmStatus !== 'running'">
+                                :disabled="$vmStatus !== 'running'" variant="danger">
                                 <x-loading target="do('stop')" />
                                 <x-ri-shut-down-line class="size-4" />
                                 <div wire:loading.remove wire:target="do('stop')">
                                     Power Off
                                 </div>
-                            </x-button.danger>
+                            </x-proxmox::ui.button>
                         </div>
                     </div>
             </div>
diff --git a/extensions/Servers/Proxmox/views/display.blade.php b/extensions/Servers/Proxmox/views/display.blade.php
index 589a75654..7b6f39ee4 100644
--- a/extensions/Servers/Proxmox/views/display.blade.php
+++ b/extensions/Servers/Proxmox/views/display.blade.php
@@ -204,16 +204,14 @@
 
             <div class="flex flex-col gap-2">
                 <div class="flex flex-wrap gap-3">
-                    <x-button.primary wire:click="saveDisplaySettings" wire:loading.attr="disabled">
-                        <x-loading target="saveDisplaySettings" />
+                    <x-proxmox::ui.button wire:click="saveDisplaySettings" wire:loading.attr="disabled" variant="primary">
                         <span wire:loading.remove wire:target="saveDisplaySettings">Save Display Settings</span>
                         <span wire:loading wire:target="saveDisplaySettings">Saving...</span>
-                    </x-button.primary>
-                    <x-button.secondary wire:click="loadDisplayConfiguration" wire:loading.attr="disabled" class="text-sm font-medium">
-                        <x-loading target="loadDisplayConfiguration" />
+                    </x-proxmox::ui.button>
+                    <x-proxmox::ui.button wire:click="loadDisplayConfiguration" wire:loading.attr="disabled" variant="secondary">
                         <span wire:loading.remove wire:target="loadDisplayConfiguration">Refresh</span>
                         <span wire:loading wire:target="loadDisplayConfiguration">Refreshing...</span>
-                    </x-button.secondary>
+                    </x-proxmox::ui.button>
                 </div>
                 <p class="text-xs text-gray-500 dark:text-gray-400">Changes are applied to the VM configuration immediately but require a restart to take effect.</p>
             </div>
diff --git a/extensions/Servers/Proxmox/views/firewall.blade.php b/extensions/Servers/Proxmox/views/firewall.blade.php
index 07cbc94d8..11e402e58 100644
--- a/extensions/Servers/Proxmox/views/firewall.blade.php
+++ b/extensions/Servers/Proxmox/views/firewall.blade.php
@@ -116,7 +116,7 @@
                         wire:click="toggleFirewall" 
                         wire:loading.attr="disabled"
                         variant="danger"
-                        icon="ri-shield-off-line">
+                        icon="ri-shield-cross-line">
                         <span wire:loading.remove wire:target="toggleFirewall">Disable</span>
                         <span wire:loading wire:target="toggleFirewall">Disabling...</span>
                     </x-proxmox::ui.button>
diff --git a/extensions/Servers/Proxmox/views/network.blade.php b/extensions/Servers/Proxmox/views/network.blade.php
index abcb8ab86..f025fbfe5 100644
--- a/extensions/Servers/Proxmox/views/network.blade.php
+++ b/extensions/Servers/Proxmox/views/network.blade.php
@@ -280,26 +280,26 @@
         </div>
 
         <div class="flex flex-col sm:flex-row gap-3">
-            <x-button.secondary wire:click="addInterface" wire:loading.attr="disabled" class="w-full sm:w-1/3"
-                :disabled="!$this->canAddInterface">
+            <x-proxmox::ui.button wire:click="addInterface" wire:loading.attr="disabled" class="w-full sm:w-1/3"
+                :disabled="!$this->canAddInterface" variant="secondary">
                 <x-loading target="addInterface" />
                 <span wire:loading.remove wire:target="addInterface">
                     <x-ri-add-line class="inline size-4 mr-1" />
                     Add Device
                 </span>
                 <span wire:loading wire:target="addInterface">Adding...</span>
-            </x-button.secondary>
-            <x-button.secondary wire:click="refreshInterfaces" wire:loading.attr="disabled" class="w-full">
+            </x-proxmox::ui.button>
+            <x-proxmox::ui.button wire:click="refreshInterfaces" wire:loading.attr="disabled" class="w-full" variant="secondary">
                 <x-loading target="refreshInterfaces" />
                 <span wire:loading.remove wire:target="refreshInterfaces">Refresh Interfaces</span>
                 <span wire:loading wire:target="refreshInterfaces">Refreshing...</span>
-            </x-button.secondary>
-            <x-button.primary wire:click="updateInterfaceType" wire:loading.attr="disabled" class="w-full"
-                :disabled="!$this->canUpdateInterface">
+            </x-proxmox::ui.button>
+            <x-proxmox::ui.button wire:click="updateInterfaceType" wire:loading.attr="disabled" class="w-full"
+                :disabled="!$this->canUpdateInterface" variant="primary">
                 <x-loading target="updateInterfaceType" />
                 <span wire:loading.remove wire:target="updateInterfaceType">Save Interface Type</span>
                 <span wire:loading wire:target="updateInterfaceType">Saving...</span>
-            </x-button.primary>
+            </x-proxmox::ui.button>
         </div>
         <p class="text-xs text-base/50 mt-2">VirtIO provides the best performance; legacy adapters (E1000, Realtek, PCnet, VMware) improve compatibility.</p>
         <p class="text-xs text-base/50 mt-1">
@@ -434,37 +434,37 @@
                 <div class="flex-1"></div>
                 <div class="flex gap-2 justify-end mt-auto">
                     @if($isIpv6)
-                        <x-button.primary 
+                        <x-proxmox::ui.button 
                             onclick="window.open('https://ping6.ping.pe/{{ $network->ip }}', '_blank')" 
-                            class="text-xs">
+                            class="text-xs" variant="primary">
                             Ping
-                        </x-button.primary>
-                        <x-button.primary 
+                        </x-proxmox::ui.button>
+                        <x-proxmox::ui.button 
                             onclick="window.open('https://mtr6.ping.pe/{{ $network->ip }}', '_blank')" 
-                            class="text-xs">
+                            class="text-xs" variant="primary">
                             MTR
-                        </x-button.primary>
-                        <x-button.primary 
+                        </x-proxmox::ui.button>
+                        <x-proxmox::ui.button 
                             onclick="window.open('https://bgp.ping.pe/{{ $network->ip }}', '_blank')" 
-                            class="text-xs">
+                            class="text-xs" variant="primary">
                             BGP
-                        </x-button.primary>
+                        </x-proxmox::ui.button>
                     @else
-                        <x-button.primary 
+                        <x-proxmox::ui.button 
                             onclick="window.open('https://ping.pe/{{ $network->ip }}', '_blank')" 
-                            class="text-xs">
+                            class="text-xs" variant="primary">
                             Ping
-                        </x-button.primary>
-                        <x-button.primary 
+                        </x-proxmox::ui.button>
+                        <x-proxmox::ui.button 
                             onclick="window.open('https://mtr.ping.pe/{{ $network->ip }}', '_blank')" 
-                            class="text-xs">
+                            class="text-xs" variant="primary">
                             MTR
-                        </x-button.primary>
-                        <x-button.primary 
+                        </x-proxmox::ui.button>
+                        <x-proxmox::ui.button 
                             onclick="window.open('https://bgp.ping.pe/{{ $network->ip }}', '_blank')" 
-                            class="text-xs">
+                            class="text-xs" variant="primary">
                             BGP
-                        </x-button.primary>
+                        </x-proxmox::ui.button>
                     @endif
                 </div>
             </div>
@@ -724,37 +724,37 @@
                     <div class="flex-1"></div>
                     <div class="flex gap-2 justify-end mt-auto">
                         @if($isIpv6)
-                            <x-button.primary 
+                            <x-proxmox::ui.button 
                                 onclick="window.open('https://ping6.ping.pe/{{ $address['ip'] }}', '_blank')" 
-                                class="text-xs">
+                                class="text-xs" variant="primary">
                                 Ping
-                            </x-button.primary>
-                            <x-button.primary 
+                            </x-proxmox::ui.button>
+                            <x-proxmox::ui.button 
                                 onclick="window.open('https://mtr6.ping.pe/{{ $address['ip'] }}', '_blank')" 
-                                class="text-xs">
+                                class="text-xs" variant="primary">
                                 MTR
-                            </x-button.primary>
-                            <x-button.primary 
+                            </x-proxmox::ui.button>
+                            <x-proxmox::ui.button 
                                 onclick="window.open('https://bgp.ping.pe/{{ $address['ip'] }}', '_blank')" 
-                                class="text-xs">
+                                class="text-xs" variant="primary">
                                 BGP
-                            </x-button.primary>
+                            </x-proxmox::ui.button>
                         @else
-                            <x-button.primary 
+                            <x-proxmox::ui.button 
                                 onclick="window.open('https://ping.pe/{{ $address['ip'] }}', '_blank')" 
-                                class="text-xs">
+                                class="text-xs" variant="primary">
                                 Ping
-                            </x-button.primary>
-                            <x-button.primary 
+                            </x-proxmox::ui.button>
+                            <x-proxmox::ui.button 
                                 onclick="window.open('https://mtr.ping.pe/{{ $address['ip'] }}', '_blank')" 
-                                class="text-xs">
+                                class="text-xs" variant="primary">
                                 MTR
-                            </x-button.primary>
-                            <x-button.primary 
+                            </x-proxmox::ui.button>
+                            <x-proxmox::ui.button 
                                 onclick="window.open('https://bgp.ping.pe/{{ $address['ip'] }}', '_blank')" 
-                                class="text-xs">
+                                class="text-xs" variant="primary">
                                 BGP
-                            </x-button.primary>
+                            </x-proxmox::ui.button>
                         @endif
                     </div>
                 </div>
diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php
index 65c5942a5..fe53487ef 100644
--- a/extensions/Servers/Proxmox/views/overview.blade.php
+++ b/extensions/Servers/Proxmox/views/overview.blade.php
@@ -429,15 +429,15 @@
                                         </p>
                                     </div>
                                     <div class="flex justify-end gap-2">
-                                        <x-button.secondary type="button" @click="showHostnameEditModal = false; $wire.cancelEditingHostname()">
+                                        <x-proxmox::ui.button type="button" @click="showHostnameEditModal = false; $wire.cancelEditingHostname()" variant="secondary">
                                             Cancel
-                                        </x-button.secondary>
-                                        <x-button.primary type="button" wire:click="updateHostname">
+                                        </x-proxmox::ui.button>
+                                        <x-proxmox::ui.button type="button" wire:click="updateHostname" variant="primary">
                                             Save
-                                        </x-button.primary>
-                                        <x-button.primary type="button" wire:click="applyHostname">
+                                        </x-proxmox::ui.button>
+                                        <x-proxmox::ui.button type="button" wire:click="applyHostname" variant="primary">
                                             Save & Apply
-                                        </x-button.primary>
+                                        </x-proxmox::ui.button>
                                     </div>
                                 </div>
                             </div>
@@ -590,15 +590,15 @@
                                         </p>
                                     </div>
                                     <div class="flex justify-end gap-2">
-                                        <x-button.secondary type="button" @click="showPasswordEditModal = false; $wire.cancelEditingPassword()">
+                                        <x-proxmox::ui.button type="button" @click="showPasswordEditModal = false; $wire.cancelEditingPassword()" variant="secondary">
                                             Cancel
-                                        </x-button.secondary>
-                                        <x-button.primary type="button" wire:click="updatePassword">
+                                        </x-proxmox::ui.button>
+                                        <x-proxmox::ui.button type="button" wire:click="updatePassword" variant="primary">
                                             Save
-                                        </x-button.primary>
-                                        <x-button.primary type="button" wire:click="applyPassword">
+                                        </x-proxmox::ui.button>
+                                        <x-proxmox::ui.button type="button" wire:click="applyPassword" variant="primary">
                                             Save & Apply
-                                        </x-button.primary>
+                                        </x-proxmox::ui.button>
                                     </div>
                                 </div>
                             </div>
@@ -847,7 +847,7 @@
                     </div>
                     <p class="text-sm text-gray-700 dark:text-gray-300 mb-3">No notes available to export.</p>
                     <div class="flex justify-end">
-                        <x-button.secondary type="button" @click="showExportErrorModal = false">Close</x-button.secondary>
+                        <x-proxmox::ui.button type="button" @click="showExportErrorModal = false" variant="secondary">Close</x-proxmox::ui.button>
                     </div>
                 </div>
             </div>
@@ -862,12 +862,11 @@
                             <div class="text-xs text-error">{{ $notesError }}</div>
                         @endif
                         <div class="flex gap-2">
-                            <x-button.primary wire:click="saveNotes" wire:loading.attr="disabled">
-                                <x-loading target="saveNotes" />
-                                <div wire:loading.remove wire:target="saveNotes">Save</div>
-                                <div wire:loading wire:target="saveNotes">Saving...</div>
-                            </x-button.primary>
-                            <x-button.secondary wire:click="cancelEditingNotes" wire:loading.attr="disabled">Cancel</x-button.secondary>
+                            <x-proxmox::ui.button wire:click="saveNotes" wire:loading.attr="disabled" variant="primary">
+                                <span wire:loading.remove wire:target="saveNotes">Save</span>
+                                <span wire:loading wire:target="saveNotes">Saving...</span>
+                            </x-proxmox::ui.button>
+                            <x-proxmox::ui.button wire:click="cancelEditingNotes" wire:loading.attr="disabled" variant="secondary">Cancel</x-proxmox::ui.button>
                         </div>
                     </div>
                 @else
@@ -883,9 +882,9 @@
                             @endif
                         </div>
                         <div class="flex gap-2">
-                            <x-button.secondary wire:click="startEditingNotes">
-                                <x-ri-edit-fill class="size-3" /> Edit
-                            </x-button.secondary>
+                            <x-proxmox::ui.button wire:click="startEditingNotes" variant="secondary" icon="ri-edit-fill">
+                                Edit
+                            </x-proxmox::ui.button>
                         </div>
                     </div>
                 @endif
diff --git a/extensions/Servers/Proxmox/views/reinstall.blade.php b/extensions/Servers/Proxmox/views/reinstall.blade.php
index d8e9f0a0a..aed1ff37d 100644
--- a/extensions/Servers/Proxmox/views/reinstall.blade.php
+++ b/extensions/Servers/Proxmox/views/reinstall.blade.php
@@ -108,16 +108,17 @@
         }
     }">
     @if($isProtected)
-        <x-button.danger 
+        <x-proxmox::ui.button 
             @click="open = true"
+            variant="danger"
             disabled
             title="Reinstall is disabled: This server is protected in Proxmox">
             Reinstall
-        </x-button.danger>
+        </x-proxmox::ui.button>
     @else
-        <x-button.danger @click="open = true">
+        <x-proxmox::ui.button @click="open = true" variant="danger">
             Reinstall
-        </x-button.danger>
+        </x-proxmox::ui.button>
     @endif
 
     <template x-if="open">
@@ -231,34 +232,30 @@
                 </div>
 
                 <div class="flex flex-row gap-4 mt-6">
-                    <x-button.secondary @click="open = false">Cancel</x-button.secondary>
+                    <x-proxmox::ui.button @click="open = false" variant="secondary">
+                        Cancel
+                    </x-proxmox::ui.button>
 
                     @if($isProtected)
-                        <x-button.danger
+                        <x-proxmox::ui.button
                             wire:click="reinstall"
                             wire:loading.attr="disabled"
-                            wire:loading.class="opacity-50"
-                            wire:loading.attr="aria-busy"
-                            wire:target="reinstall"
+                            variant="danger"
                             disabled
-                            title="Reinstall is disabled: This server is protected in Proxmox"
-                        >
-                            <x-loading target="reinstall" />
-                            <div wire:loading.remove wire:target="reinstall">Reinstall</div>
-                        </x-button.danger>
+                            title="Reinstall is disabled: This server is protected in Proxmox">
+                            <span wire:loading.remove wire:target="reinstall">Reinstall</span>
+                            <span wire:loading wire:target="reinstall">Reinstalling...</span>
+                        </x-proxmox::ui.button>
                     @else
-                        <x-button.danger
+                        <x-proxmox::ui.button
                             wire:click="reinstall"
                             wire:loading.attr="disabled"
-                            wire:loading.class="opacity-50"
-                            wire:loading.attr="aria-busy"
-                            wire:target="reinstall"
+                            variant="danger"
                             :disabled="!$os || !$confirmReinstall"
-                            :title="!$os ? 'Please select an operating system' : (!$confirmReinstall ? 'Please confirm the reinstallation' : 'Reinstall server')"
-                        >
-                            <x-loading target="reinstall" />
-                            <div wire:loading.remove wire:target="reinstall">Reinstall</div>
-                        </x-button.danger>
+                            :title="!$os ? 'Please select an operating system' : (!$confirmReinstall ? 'Please confirm the reinstallation' : 'Reinstall server')">
+                            <span wire:loading.remove wire:target="reinstall">Reinstall</span>
+                            <span wire:loading wire:target="reinstall">Reinstalling...</span>
+                        </x-proxmox::ui.button>
                     @endif
                 </div>
             </div>
diff --git a/extensions/Servers/Proxmox/views/statistics.blade.php b/extensions/Servers/Proxmox/views/statistics.blade.php
index b35e3acec..88a5d7d21 100644
--- a/extensions/Servers/Proxmox/views/statistics.blade.php
+++ b/extensions/Servers/Proxmox/views/statistics.blade.php
@@ -601,7 +601,7 @@
                 <div class="flex items-center gap-2"
                      x-data
                      @statistics-export:no-data.window="$wire.showExportInfo($event.detail.message)">
-                    <x-button.primary wire:click="createLiveStatistic" class="whitespace-nowrap">
+                    <x-proxmox::ui.button wire:click="createLiveStatistic" class="whitespace-nowrap" variant="primary">
                         <x-loading target="createLiveStatistic" />
                         <x-ri-refresh-line class="size-4" />
                         <div wire:loading.remove wire:target="createLiveStatistic">
@@ -610,7 +610,7 @@
                         <div wire:loading wire:target="createLiveStatistic">
                             Creating...
                         </div>
-                    </x-button.primary>
+                    </x-proxmox::ui.button>
                     <button type="button"
                             wire:click="openClearStatisticsModal"
                             wire:loading.attr="disabled"
@@ -3756,10 +3756,10 @@
                     </div>
 
                     <div class="flex gap-3 justify-end">
-                        <x-button.secondary @click="open = false">
+                        <x-proxmox::ui.button @click="open = false" variant="secondary">
                             Cancel
-                        </x-button.secondary>
-                        <x-button.danger @click="$wire.deleteStatistic(statId); open = false">
+                        </x-proxmox::ui.button>
+                        <x-proxmox::ui.button @click="$wire.deleteStatistic(statId); open = false" variant="danger">
                             <x-loading target="deleteStatistic" />
                             <div wire:loading.remove wire:target="deleteStatistic">
                                 Delete
@@ -3767,7 +3767,7 @@
                             <div wire:loading wire:target="deleteStatistic">
                                 Deleting...
                             </div>
-                        </x-button.danger>
+                        </x-proxmox::ui.button>
                     </div>
                 </div>
             </div>
@@ -3817,10 +3817,10 @@
                         <p class="text-base/60">This cannot be undone.</p>
                     </div>
                     <div class="flex gap-3 justify-end">
-                        <x-button.secondary wire:click="closeClearStatisticsModal">
+                        <x-proxmox::ui.button wire:click="closeClearStatisticsModal" variant="secondary">
                             Cancel
-                        </x-button.secondary>
-                        <x-button.danger wire:click="clearStatisticsHistory">
+                        </x-proxmox::ui.button>
+                        <x-proxmox::ui.button wire:click="clearStatisticsHistory" variant="danger">
                             <x-loading target="clearStatisticsHistory" />
                             <div wire:loading.remove wire:target="clearStatisticsHistory">
                                 Clear History
@@ -3828,7 +3828,7 @@
                             <div wire:loading wire:target="clearStatisticsHistory">
                                 Clearing...
                             </div>
-                        </x-button.danger>
+                        </x-proxmox::ui.button>
                     </div>
                 </div>
             </div>
@@ -3874,9 +3874,9 @@
                     </div>
                     <p class="text-sm text-base/80">{{ $exportInfoMessage }}</p>
                     <div class="flex justify-end gap-3">
-                        <x-button.secondary wire:click="closeExportInfoModal">
+                        <x-proxmox::ui.button wire:click="closeExportInfoModal" variant="secondary">
                             Close
-                        </x-button.secondary>
+                        </x-proxmox::ui.button>
                     </div>
                 </div>
             </div>
diff --git a/extensions/Servers/Proxmox/views/subdomain.blade.php b/extensions/Servers/Proxmox/views/subdomain.blade.php
index f78667994..84db9aa27 100644
--- a/extensions/Servers/Proxmox/views/subdomain.blade.php
+++ b/extensions/Servers/Proxmox/views/subdomain.blade.php
@@ -155,10 +155,9 @@
                         </div>
                     </div>
                 </div>
-                <x-button.primary wire:click="$set('showCreateModal', true)" :disabled="count($this->availableIpsForSubdomain) === 0" class="!w-auto flex-shrink-0">
-                    <x-ri-add-circle-fill class="size-4" />
+                <x-proxmox::ui.button wire:click="$set('showCreateModal', true)" :disabled="count($this->availableIpsForSubdomain) === 0" variant="primary" icon="ri-add-circle-fill">
                     Create Subdomain
-                </x-button.primary>
+                </x-proxmox::ui.button>
             </div>
             @if(count($this->availableIpsForSubdomain) === 0)
                 <p class="text-sm text-gray-500 dark:text-gray-400">All available public IP addresses already have subdomains assigned.</p>
@@ -255,10 +254,9 @@
                                     @endif
                                 </div>
                                 <div class="flex gap-2">
-                                    <x-button.danger wire:click="openDeleteModal('{{ $zone['subdomain'] }}', {{ $zone['ipAddressId'] }})">
-                                        <x-ri-delete-bin-line class="size-4" />
+                                    <x-proxmox::ui.button wire:click="openDeleteModal('{{ $zone['subdomain'] }}', {{ $zone['ipAddressId'] }})" variant="danger" icon="ri-delete-bin-line">
                                         Delete
-                                    </x-button.danger>
+                                    </x-proxmox::ui.button>
                                 </div>
                             </div>
                         </div>
@@ -314,12 +312,11 @@
                     </div>
 
                     <div class="flex gap-2 justify-end">
-                        <x-button.secondary wire:click="$set('showCreateModal', false)">Cancel</x-button.secondary>
-                        <x-button.primary wire:click="createSubdomain" wire:loading.attr="disabled">
-                            <x-loading target="createSubdomain" />
+                        <x-proxmox::ui.button wire:click="$set('showCreateModal', false)" variant="secondary">Cancel</x-proxmox::ui.button>
+                        <x-proxmox::ui.button wire:click="createSubdomain" wire:loading.attr="disabled" variant="primary">
                             <span wire:loading.remove wire:target="createSubdomain">Create</span>
                             <span wire:loading wire:target="createSubdomain">Creating...</span>
-                        </x-button.primary>
+                        </x-proxmox::ui.button>
                     </div>
                 </div>
             </div>
@@ -380,11 +377,11 @@
                         </div>
                     </div>
                     <div class="mt-3">
-                        <x-button.primary wire:click="addRecord" wire:loading.attr="disabled" size="sm">
+                        <x-proxmox::ui.button wire:click="addRecord" wire:loading.attr="disabled" size="sm" variant="primary">
                             <x-loading target="addRecord" />
                             <span wire:loading.remove wire:target="addRecord">Add Record</span>
                             <span wire:loading wire:target="addRecord">Adding...</span>
-                        </x-button.primary>
+                        </x-proxmox::ui.button>
                     </div>
                 </div>
 
@@ -413,10 +410,10 @@
                                             <td class="py-2 px-3 text-sm">{{ $record['rdata'] ?? $record['ipAddress'] ?? '' }}</td>
                                             <td class="py-2 px-3 text-sm">{{ $record['ttl'] ?? 3600 }}</td>
                                             <td class="py-2 px-3 text-sm text-right">
-                                                <x-button.danger wire:click="deleteRecord('{{ $record['name'] ?? '@' }}', '{{ $record['type'] ?? 'A' }}')" 
-                                                    wire:confirm="Are you sure you want to delete this record?" size="sm">
+                                                <x-proxmox::ui.button wire:click="deleteRecord('{{ $record['name'] ?? '@' }}', '{{ $record['type'] ?? 'A' }}')" 
+                                                    wire:confirm="Are you sure you want to delete this record?" size="sm" variant="danger">
                                                     <x-ri-delete-bin-line class="size-4" />
-                                                </x-button.danger>
+                                                </x-proxmox::ui.button>
                                             </td>
                                         </tr>
                                     @endforeach
@@ -447,12 +444,12 @@
                 </div>
 
                 <div class="flex gap-2 justify-end">
-                    <x-button.secondary wire:click="closeDeleteModal">Cancel</x-button.secondary>
-                    <x-button.danger wire:click="deleteSubdomain" wire:loading.attr="disabled">
+                    <x-proxmox::ui.button wire:click="closeDeleteModal" variant="secondary">Cancel</x-proxmox::ui.button>
+                    <x-proxmox::ui.button wire:click="deleteSubdomain" wire:loading.attr="disabled" variant="danger">
                         <x-loading target="deleteSubdomain" />
                         <span wire:loading.remove wire:target="deleteSubdomain">Delete</span>
                         <span wire:loading wire:target="deleteSubdomain">Deleting...</span>
-                    </x-button.danger>
+                    </x-proxmox::ui.button>
                 </div>
             </div>
         </div>
diff --git a/extensions/Servers/Proxmox/views/system.blade.php b/extensions/Servers/Proxmox/views/system.blade.php
index 6c7ac59c3..b3390cfca 100644
--- a/extensions/Servers/Proxmox/views/system.blade.php
+++ b/extensions/Servers/Proxmox/views/system.blade.php
@@ -416,10 +416,10 @@
                             </label>
                             <p class="text-xs text-base/50">Pre-enroll Secure Boot keys during EFI disk creation. Enables Secure Boot by default. Useful for UEFI guests requiring Secure Boot support.</p>
                         </div>
-                        <x-button.secondary wire:click="addEfiDisk" wire:loading.attr="disabled" class="w-full sm:w-auto">
+                        <x-proxmox::ui.button wire:click="addEfiDisk" wire:loading.attr="disabled" class="w-full sm:w-auto" variant="secondary">
                             <x-loading target="addEfiDisk" />
                             Add EFI Disk
-                        </x-button.secondary>
+                        </x-proxmox::ui.button>
                     </div>
                 </div>
                 @endif
@@ -530,10 +530,10 @@
                                 <option value="v2.0">v2.0</option>
                             </select>
                         </div>
-                        <x-button.secondary wire:click="addTpmDevice" wire:loading.attr="disabled" class="w-full sm:w-auto">
+                        <x-proxmox::ui.button wire:click="addTpmDevice" wire:loading.attr="disabled" class="w-full sm:w-auto" variant="secondary">
                             <x-loading target="addTpmDevice" />
                             Add TPM Device
-                        </x-button.secondary>
+                        </x-proxmox::ui.button>
                     </div>
                 </div>
                 @endif
@@ -541,17 +541,17 @@
         </div>
 
         <div class="flex items-center gap-2 overflow-x-auto">
-            <x-button.secondary wire:click="loadSystemConfiguration" wire:loading.attr="disabled">
+            <x-proxmox::ui.button wire:click="loadSystemConfiguration" wire:loading.attr="disabled" variant="secondary">
                 <x-loading target="loadSystemConfiguration" />
                 Refresh
-            </x-button.secondary>
-            <x-button.secondary wire:click="resetSystemSettings" :disabled="!$this->hasChanges">
+            </x-proxmox::ui.button>
+            <x-proxmox::ui.button wire:click="resetSystemSettings" :disabled="!$this->hasChanges" variant="secondary">
                 Reset
-            </x-button.secondary>
-            <x-button.primary wire:click="saveSystemSettings" wire:loading.attr="disabled" :disabled="!$this->hasChanges">
+            </x-proxmox::ui.button>
+            <x-proxmox::ui.button wire:click="saveSystemSettings" wire:loading.attr="disabled" :disabled="!$this->hasChanges" variant="primary">
                 <x-loading target="saveSystemSettings" />
                 Save Settings
-            </x-button.primary>
+            </x-proxmox::ui.button>
         </div>
     </div>
 </x-proxmox::layout>