From 16fc31dfeefdf1542d57d53b34962cff169c6cf4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Barto=C5=A1?= <mabartos@redhat.com>
Date: Wed, 27 May 2026 23:51:02 +0200
Subject: [PATCH] Unify buttons in horizontal layout for Login UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #49372

Signed-off-by: Martin Bartoš <mabartos@redhat.com>
---
 docs/documentation/release_notes/topics/26_7_0.adoc       | 4 ++++
 .../main/resources/theme/keycloak.v2/login/buttons.ftl    | 8 ++++----
 .../theme/keycloak.v2/login/delete-account-confirm.ftl    | 4 ++--
 .../theme/keycloak.v2/login/delete-credential.ftl         | 6 +++---
 .../resources/theme/keycloak.v2/login/link-idp-action.ftl | 6 +++---
 .../theme/keycloak.v2/login/login-oauth-grant.ftl         | 4 ++--
 .../login/login-oauth2-device-verify-user-code.ftl        | 2 +-
 .../theme/keycloak.v2/login/login-reset-password.ftl      | 4 ++--
 .../theme/keycloak.v2/login/login-update-password.ftl     | 6 +++---
 .../src/main/resources/theme/keycloak.v2/login/terms.ftl  | 4 ++--
 .../resources/theme/keycloak.v2/login/update-email.ftl    | 4 ++--
 .../theme/keycloak.v2/login/webauthn-authenticate.ftl     | 2 +-
 .../resources/theme/keycloak.v2/login/webauthn-error.ftl  | 4 ++--
 .../theme/keycloak.v2/login/webauthn-register.ftl         | 4 ++--
 14 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/docs/documentation/release_notes/topics/26_7_0.adoc b/docs/documentation/release_notes/topics/26_7_0.adoc
index 93f78b4843d..0820d7b376d 100644
--- a/docs/documentation/release_notes/topics/26_7_0.adoc
+++ b/docs/documentation/release_notes/topics/26_7_0.adoc
@@ -27,6 +27,10 @@ When a user wants to authenticate with Passkeys, {project_name} shows the authen
 As part of this change, the passkey authentication page in the login theme and the signing-in page in the account console were updated.
 If you use a custom theme that overrides these pages, verify that your customizations work as expected with this release.
 
+== Unified button layout in login theme
+
+Action buttons across login theme pages now use a consistent horizontal layout. If you use a custom theme that overrides these pages, verify that your customizations work as expected with this release.
+
 == Realm search now matches by display name
 
 When searching for realms in the admin console, the search now also matches against the realm's display name in addition to the realm name.
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/buttons.ftl b/themes/src/main/resources/theme/keycloak.v2/login/buttons.ftl
index 14480cc886f..2106364d2a4 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/buttons.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/buttons.ftl
@@ -6,19 +6,19 @@
   </div>
 </#macro>
 
-<#macro button label id="" name="" class=["kcButtonPrimaryClass"] extra...>
-  <button class="<#list class as c>${properties[c]} </#list>" name="${name}" id="${id}"
+<#macro button label id="" name="" type="primary" fullWidth=true class=[] extra...>
+  <button class="${properties['kcButton' + type?cap_first + 'Class']}<#if fullWidth> ${properties.kcButtonBlockClass}</#if><#list class as c> ${properties[c]}</#list>" name="${name}" id="${id}"
           type="submit" <#list extra as attrName, attrVal>${attrName}="${attrVal}"</#list>>
   ${msg(label)}
   </button>
 </#macro>
 
-<#macro buttonLink href label id="" class=["kcButtonSecondaryClass"]>
+<#macro buttonLink href label id="" class=["kcButtonSecondaryClass", "kcButtonBlockClass"]>
   <a id="${id}" href="${href}" class="<#list class as c>${properties[c]} </#list>">${msg(label)}</a>
 </#macro>
 
 <#macro loginButton>
   <@buttons.actionGroup>
-    <@buttons.button id="kc-login" name="login" label="doLogIn" class=["kcButtonPrimaryClass", "kcButtonBlockClass"] />
+    <@buttons.button id="kc-login" name="login" label="doLogIn" />
   </@buttons.actionGroup>
 </#macro>
\ No newline at end of file
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/delete-account-confirm.ftl b/themes/src/main/resources/theme/keycloak.v2/login/delete-account-confirm.ftl
index 67ba978b9d6..05a1fd2e529 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/delete-account-confirm.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/delete-account-confirm.ftl
@@ -29,9 +29,9 @@
       <p class="delete-account-text">${msg("finalDeletionConfirmation")}</p>
 
       <@buttons.actionGroup>
-        <@buttons.button id="kc-submit" label="doConfirmDelete" class=["kcButtonPrimaryClass"]/>
+        <@buttons.button id="kc-submit" label="doConfirmDelete"/>
         <#if triggered_from_aia>
-          <@buttons.button id="kc-cancel" name="cancel-aia" label="doCancel" class=["kcButtonSecondaryClass"]/>
+          <@buttons.button id="kc-cancel" name="cancel-aia" label="doCancel" type="secondary"/>
         </#if>
       </@buttons.actionGroup>
     </form>
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/delete-credential.ftl b/themes/src/main/resources/theme/keycloak.v2/login/delete-credential.ftl
index ab0e24862cb..aa91f479232 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/delete-credential.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/delete-credential.ftl
@@ -12,9 +12,9 @@
         </div>
 
         <form class="${properties.kcFormClass!}" action="${url.loginAction}" method="POST">
-            <@buttons.actionGroup>
-                <@buttons.button name="accept" id="kc-accept" label="doConfirmDelete" class=["kcButtonPrimaryClass"]/>
-                <@buttons.button name="cancel-aia" id="kc-decline" label="doDecline" class=["kcButtonSecondaryClass"]/>
+            <@buttons.actionGroup horizontal=true>
+                <@buttons.button name="accept" id="kc-accept" label="doConfirmDelete"/>
+                <@buttons.button name="cancel-aia" id="kc-decline" label="doDecline" type="secondary"/>
             </@buttons.actionGroup>
         </form>
     </#if>
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/link-idp-action.ftl b/themes/src/main/resources/theme/keycloak.v2/login/link-idp-action.ftl
index 42fa8c88e06..ee0342ed13d 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/link-idp-action.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/link-idp-action.ftl
@@ -12,9 +12,9 @@
         </div>
 
         <form class="${properties.kcFormClass!}" action="${url.loginAction}" method="POST">
-            <@buttons.actionGroup>
-                <@buttons.button name="continue" id="kc-continue" label="doContinue" class=["kcButtonPrimaryClass"]/>
-                <@buttons.button name="cancel-aia" id="kc-cancel" label="doCancel" class=["kcButtonSecondaryClass"]/>
+            <@buttons.actionGroup horizontal=true>
+                <@buttons.button name="continue" id="kc-continue" label="doContinue"/>
+                <@buttons.button name="cancel-aia" id="kc-cancel" label="doCancel" type="secondary"/>
             </@buttons.actionGroup>
         </form>
     </#if>
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/login-oauth-grant.ftl b/themes/src/main/resources/theme/keycloak.v2/login/login-oauth-grant.ftl
index 4fa195012b9..9baf1dd6ed8 100755
--- a/themes/src/main/resources/theme/keycloak.v2/login/login-oauth-grant.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/login-oauth-grant.ftl
@@ -49,9 +49,9 @@
 
             <form class="${properties.kcFormClass} ${properties.kcMarginTopClass!}" action="${url.oauthAction}" method="POST">
                 <input type="hidden" name="code" value="${oauth.code}">
-                <@buttons.actionGroup>
+                <@buttons.actionGroup horizontal=true>
                     <@buttons.button id="kc-login" name="accept" label="doYes"/>
-                    <@buttons.button id="kc-cancel" name="cancel" label="doNo" class=["kcButtonSecondaryClass"]/>
+                    <@buttons.button id="kc-cancel" name="cancel" label="doNo" type="secondary"/>
                 </@buttons.actionGroup>
             </form>
         </div>
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/login-oauth2-device-verify-user-code.ftl b/themes/src/main/resources/theme/keycloak.v2/login/login-oauth2-device-verify-user-code.ftl
index 37bba408bf5..bfa4b788f01 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/login-oauth2-device-verify-user-code.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/login-oauth2-device-verify-user-code.ftl
@@ -10,7 +10,7 @@
             <@field.input name="device_user_code" label=msg("verifyOAuth2DeviceUserCode") autofocus=true />
 
             <@buttons.actionGroup>
-                <@buttons.button id="kc-login" label="doSubmit" class=["kcButtonPrimaryClass", "kcButtonBlockClass"] />
+                <@buttons.button id="kc-login" label="doSubmit" />
             </@buttons.actionGroup>
         </form>
     </#if>
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/login-reset-password.ftl b/themes/src/main/resources/theme/keycloak.v2/login/login-reset-password.ftl
index c23c2b7c55c..135697b5dd7 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/login-reset-password.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/login-reset-password.ftl
@@ -12,8 +12,8 @@
             <@field.input name="username" label=label value=auth.attemptedUsername!'' autofocus=true />
 
             <@buttons.actionGroup>
-              <@buttons.button id="kc-form-buttons" label="doSubmit" class=["kcButtonPrimaryClass", "kcButtonBlockClass"]/>
-              <@buttons.buttonLink href=url.loginUrl label="backToLogin" class=["kcButtonSecondaryClass", "kcButtonBlockClass"]/>
+              <@buttons.button id="kc-form-buttons" label="doSubmit"/>
+              <@buttons.buttonLink href=url.loginUrl label="backToLogin"/>
             </@buttons.actionGroup>
 
         </form>
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/login-update-password.ftl b/themes/src/main/resources/theme/keycloak.v2/login/login-update-password.ftl
index a005019f905..28b33aba2f8 100755
--- a/themes/src/main/resources/theme/keycloak.v2/login/login-update-password.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/login-update-password.ftl
@@ -18,10 +18,10 @@
 
             <@buttons.actionGroup horizontal=true>
                 <#if isAppInitiatedAction??>
-                    <@buttons.button id="kc-submit" name="login" label="doSubmit" class=["kcButtonPrimaryClass"]/>
-                    <@buttons.button id="kc-cancel" label="doCancel" name="cancel-aia" class=["kcButtonSecondaryClass"]/>
+                    <@buttons.button id="kc-submit" name="login" label="doSubmit"/>
+                    <@buttons.button id="kc-cancel" label="doCancel" name="cancel-aia" type="secondary"/>
                 <#else>
-                    <@buttons.button id="kc-submit" name="login" label="doSubmit" class=["kcButtonPrimaryClass", "kcButtonBlockClass"]/>
+                    <@buttons.button id="kc-submit" name="login" label="doSubmit"/>
                 </#if>
             </@buttons.actionGroup>
         </form>
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/terms.ftl b/themes/src/main/resources/theme/keycloak.v2/login/terms.ftl
index 70c012abfc2..b7a22c2b501 100755
--- a/themes/src/main/resources/theme/keycloak.v2/login/terms.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/terms.ftl
@@ -12,8 +12,8 @@
     </div>
     <form class="${properties.kcFormClass!}" action="${url.loginAction}" method="POST">
         <@buttons.actionGroup horizontal=true>
-            <@buttons.button name="accept" id="kc-accept" label="doAccept" class=["kcButtonPrimaryClass"]/>
-            <@buttons.button name="cancel" id="kc-decline" label="doDecline" class=["kcButtonSecondaryClass"]/>
+            <@buttons.button name="accept" id="kc-accept" label="doAccept"/>
+            <@buttons.button name="cancel" id="kc-decline" label="doDecline" type="secondary"/>
         </@buttons.actionGroup>
     </form>
     <div class="clearfix"></div>
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/update-email.ftl b/themes/src/main/resources/theme/keycloak.v2/login/update-email.ftl
index d82a303238e..fdf3dabb37e 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/update-email.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/update-email.ftl
@@ -18,9 +18,9 @@
                 <@passwordCommons.logoutOtherSessions/>
 
                 <@buttons.actionGroup horizontal=true>
-                    <@buttons.button id="kc-submit" label="doSubmit" class=["kcButtonPrimaryClass","kcButtonBlockClass"]/>
+                    <@buttons.button id="kc-submit" label="doSubmit"/>
                     <#if isAppInitiatedAction??>
-                        <@buttons.button id="kc-cancel" label="doCancel" class=["kcButtonSecondaryClass","kcButtonBlockClass"] name="cancel-aia" value="true"/>
+                        <@buttons.button id="kc-cancel" label="doCancel" type="secondary" name="cancel-aia" value="true"/>
                     </#if>
                 </@buttons.actionGroup>
             </div>
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/webauthn-authenticate.ftl b/themes/src/main/resources/theme/keycloak.v2/login/webauthn-authenticate.ftl
index 6cd2c02ebcd..780f492678d 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/webauthn-authenticate.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/webauthn-authenticate.ftl
@@ -117,7 +117,7 @@
                 </#if>
 
             <@buttons.actionGroup>
-                <@buttons.button id="authenticateWebAuthnButton" label="webauthn-doAuthenticate" class=["kcButtonPrimaryClass","kcButtonBlockClass"] autofocus="autofocus"/>
+                <@buttons.button id="authenticateWebAuthnButton" label="webauthn-doAuthenticate" autofocus="autofocus"/>
             </@buttons.actionGroup>
         </div>
     <script type="module">
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/webauthn-error.ftl b/themes/src/main/resources/theme/keycloak.v2/login/webauthn-error.ftl
index d549c9ab40a..cb98bed25a0 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/webauthn-error.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/webauthn-error.ftl
@@ -21,12 +21,12 @@
             <input type="hidden" id="isSetRetry" name="isSetRetry"/>
 
             <@buttons.actionGroup horizontal=true>
-                <@buttons.button id="kc-try-again" name="try-again" label="doTryAgain" class=["kcButtonPrimaryClass","kcButtonBlockClass"] onclick="refreshPage()" />
+                <@buttons.button id="kc-try-again" name="try-again" label="doTryAgain" onclick="refreshPage()" />
 
                 <#if isAppInitiatedAction??>
                     <form action="${url.loginAction}" class="${properties.kcFormClass!}" id="kc-webauthn-settings-form"
                           method="post">
-                        <@buttons.button id="cancelWebAuthnAIA" name="cancel-aia" label="doCancel" class=["kcButtonSecondaryClass","kcButtonBlockClass"]/>
+                        <@buttons.button id="cancelWebAuthnAIA" name="cancel-aia" label="doCancel" type="secondary"/>
                     </form>
                 </#if>
             </@buttons.actionGroup>
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/webauthn-register.ftl b/themes/src/main/resources/theme/keycloak.v2/login/webauthn-register.ftl
index a56e7fe67ca..c052b6b4bbf 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/webauthn-register.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/webauthn-register.ftl
@@ -49,11 +49,11 @@
         </script>
 
             <@buttons.actionGroup horizontal=true>
-                <@buttons.button id="registerWebAuthn" label="doRegisterSecurityKey" class=["kcButtonPrimaryClass","kcButtonBlockClass"]/>
+                <@buttons.button id="registerWebAuthn" label="doRegisterSecurityKey"/>
                 <#if !isSetRetry?has_content && isAppInitiatedAction?has_content>
                     <form class="${properties.kcFormClass!}" action="${url.loginAction}"
                           id="kc-webauthn-settings-form" method="post">
-                        <@buttons.button id="cancelWebAuthnAIA" name="cancel-aia" label="doCancel" class=["kcButtonSecondaryClass","kcButtonBlockClass"]/>
+                        <@buttons.button id="cancelWebAuthnAIA" name="cancel-aia" label="doCancel" type="secondary"/>
                     </form>
                 </#if>
             </@buttons.actionGroup>