diff --git a/admin/app/components/solidus_admin/products/show/component.html.erb b/admin/app/components/solidus_admin/products/show/component.html.erb
index 28d52c81cc4..0c500371254 100644
--- a/admin/app/components/solidus_admin/products/show/component.html.erb
+++ b/admin/app/components/solidus_admin/products/show/component.html.erb
@@ -165,8 +165,7 @@
         <%= render component("ui/button").new(
           tag: :button,
           text: t(".delete"),
-          scheme: :secondary,
-          class: "border-red-500 text-red-500 hover:bg-red-500 hover:text-white",
+          scheme: :danger,
           "data-action": "click->#{stimulus_id}#confirmDelete",
           "data-#{stimulus_id}-message-param": t(".delete_confirmation"),
         ) %>
diff --git a/admin/app/components/solidus_admin/ui/button/component.rb b/admin/app/components/solidus_admin/ui/button/component.rb
index 480817d598e..b3cf234b5fe 100644
--- a/admin/app/components/solidus_admin/ui/button/component.rb
+++ b/admin/app/components/solidus_admin/ui/button/component.rb
@@ -35,23 +35,31 @@ class SolidusAdmin::UI::Button::Component < SolidusAdmin::BaseComponent
       active:text-white active:bg-gray-800
       focus:text-white focus:bg-gray-700
       disabled:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed
-      aria-disabled:text-gray-400 aria-disabled:bg-gray-100 aria-disabled:cursor-not-allowed
+      aria-disabled:text-gray-400 aria-disabled:bg-gray-100 aria-disabled:aria-disabled:cursor-not-allowed
     ],
     secondary: %w[
       text-gray-700 bg-white border border-1 border-gray-200
       hover:bg-gray-50
       active:bg-gray-100
       focus:bg-gray-50
-      disabled:text-gray-300 disabled:bg-white border-gray-200 disabled:cursor-not-allowed
-      aria-disabled:text-gray-300 aria-disabled:bg-white border-gray-200 aria-disabled:cursor-not-allowed
+      disabled:text-gray-300 disabled:bg-white disabled:cursor-not-allowed
+      aria-disabled:text-gray-300 aria-disabled:bg-white aria-disabled:cursor-not-allowed
+    ],
+    danger: %w[
+      text-red-500 bg-white border border-1 border-red-500
+      hover:bg-red-500 hover:border-red-600 hover:text-white
+      active:bg-red-600 active:border-red-700 active:text-white
+      focus:bg-red-50 focus:bg-red-500 focus:border-red-600 focus:text-white
+      disabled:text-red-300 disabled:bg-white disabled:border-red-200 disabled:cursor-not-allowed
+      aria-disabled:text-red-300 aria-disabled:bg-white aria-disabled:border-red-200 aria-disabled:cursor-not-allowed
     ],
     ghost: %w[
       text-gray-700 bg-transparent
       hover:bg-gray-50
       active:bg-gray-100
       focus:bg-gray-50 focus:ring-gray-300 focus:ring-2
-      disabled:text-gray-300 disabled:bg-transparent border-gray-300 disabled:cursor-not-allowed
-      aria-disabled:text-gray-300 aria-disabled:bg-transparent border-gray-300 aria-disabled:cursor-not-allowed
+      disabled:text-gray-300 disabled:bg-transparent disabled:border-gray-300 disabled:cursor-not-allowed
+      aria-disabled:text-gray-300 aria-disabled:bg-transparent aria-disabled:border-gray-300 aria-disabled:cursor-not-allowed
     ],
   }
 
@@ -70,6 +78,7 @@ def initialize(
 
     @attributes[:class] = [
       'justify-start items-center justify-center gap-1 inline-flex rounded',
+      'focus:ring focus:ring-gray-300 focus:ring-0.5 focus:bg-white focus:ring-offset-0 [&:focus-visible]:outline-none',
       SIZES.fetch(size.to_sym),
       (TEXT_PADDINGS.fetch(size.to_sym) if @text),
       SCHEMES.fetch(scheme.to_sym),