From 1389cb7ed695223c45fc22aa133a6fce698a4469 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Mon, 26 Jan 2026 20:57:50 +0700
Subject: [PATCH] chore: render button only if primary or secondary button is
 used

---
 src/components/modal/ConfirmationModal.tsx | 96 ++++++++++++----------
 1 file changed, 54 insertions(+), 42 deletions(-)

diff --git a/src/components/modal/ConfirmationModal.tsx b/src/components/modal/ConfirmationModal.tsx
index 98a0b51d..1486b6d5 100644
--- a/src/components/modal/ConfirmationModal.tsx
+++ b/src/components/modal/ConfirmationModal.tsx
@@ -167,49 +167,61 @@ const ConfirmationModal = ({
 
         {children && <div className='w-full'>{children}</div>}
 
-        <div className='w-full grid grid-cols-2 gap-3'>
-          {secondaryButton && secondaryButton.text && (
-            <Button
-              {...secondaryButton}
-              variant='outline'
-              color={secondaryButton?.color}
-              isLoading={secondaryButton?.isLoading}
-              disabled={
-                secondaryButton?.isLoading !== undefined
-                  ? secondaryButton?.isLoading
-                  : isPrimaryButtonLoading
-              }
-              onClick={closeModalHandler}
-              className={cn(
-                'p-2 rounded-xl text-sm',
-                secondaryButton?.className
-              )}
-            >
-              {secondaryButton?.text ?? 'Tidak'}
-            </Button>
-          )}
+        {(secondaryButton || primaryButton) && (
+          <div
+            className={cn('w-full grid gap-3', {
+              'grid-cols-2': secondaryButton && primaryButton,
+              'grid-cols-1':
+                (secondaryButton && !primaryButton) ||
+                (!secondaryButton && primaryButton),
+            })}
+          >
+            {secondaryButton && secondaryButton.text && (
+              <Button
+                {...secondaryButton}
+                variant='outline'
+                color={secondaryButton?.color}
+                isLoading={secondaryButton?.isLoading}
+                disabled={
+                  secondaryButton?.isLoading !== undefined
+                    ? secondaryButton?.isLoading
+                    : isPrimaryButtonLoading
+                }
+                onClick={closeModalHandler}
+                className={cn(
+                  'p-2 rounded-xl text-sm',
+                  secondaryButton?.className
+                )}
+              >
+                {secondaryButton?.text ?? 'Tidak'}
+              </Button>
+            )}
 
-          {primaryButton && primaryButton.text && (
-            <Button
-              {...primaryButton}
-              color={primaryButton?.color ?? 'info'}
-              onClick={primaryButtonClickHandler}
-              isLoading={
-                primaryButton?.isLoading !== undefined
-                  ? primaryButton?.isLoading
-                  : isPrimaryButtonLoading
-              }
-              disabled={
-                primaryButton?.isLoading !== undefined
-                  ? primaryButton?.isLoading
-                  : isPrimaryButtonLoading
-              }
-              className={cn('p-2 rounded-xl text-sm', primaryButton?.className)}
-            >
-              {primaryButton?.text ?? 'Ya'}
-            </Button>
-          )}
-        </div>
+            {primaryButton && primaryButton.text && (
+              <Button
+                {...primaryButton}
+                color={primaryButton?.color ?? 'info'}
+                onClick={primaryButtonClickHandler}
+                isLoading={
+                  primaryButton?.isLoading !== undefined
+                    ? primaryButton?.isLoading
+                    : isPrimaryButtonLoading
+                }
+                disabled={
+                  primaryButton?.isLoading !== undefined
+                    ? primaryButton?.isLoading
+                    : isPrimaryButtonLoading
+                }
+                className={cn(
+                  'p-2 rounded-xl text-sm',
+                  primaryButton?.className
+                )}
+              >
+                {primaryButton?.text ?? 'Ya'}
+              </Button>
+            )}
+          </div>
+        )}
       </div>
     </Modal>
   );