diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
index d7d07b9afb55..a9f65cad0714 100644
--- a/ui/components/app/app-components.scss
+++ b/ui/components/app/app-components.scss
@@ -34,7 +34,7 @@
 @import 'snaps/insight-warnings/index';
 @import 'snaps/snap-authorship-header/index';
 @import 'snaps/snap-authorship-pill/index';
-@import 'snaps/snap-footer-button/index';
+@import 'snaps/snap-ui-footer-button/index';
 @import 'hold-to-reveal-button/index';
 @import 'home-notification/index';
 @import 'info-box/index';
diff --git a/ui/components/app/metamask-template-renderer/safe-component-list.js b/ui/components/app/metamask-template-renderer/safe-component-list.js
index 5756c5cbed2b..14abe8eceea7 100644
--- a/ui/components/app/metamask-template-renderer/safe-component-list.js
+++ b/ui/components/app/metamask-template-renderer/safe-component-list.js
@@ -44,7 +44,7 @@ import { SnapUITooltip } from '../snaps/snap-ui-tooltip';
 import { SnapUICard } from '../snaps/snap-ui-card';
 import { SnapUIAddress } from '../snaps/snap-ui-address';
 import { SnapUISelector } from '../snaps/snap-ui-selector';
-import { SnapFooterButton } from '../snaps/snap-footer-button';
+import { SnapUIFooterButton } from '../snaps/snap-ui-footer-button';
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
 import { SnapAccountSuccessMessage } from '../../../pages/confirmations/components/snap-account-success-message';
 import { SnapAccountErrorMessage } from '../../../pages/confirmations/components/snap-account-error-message';
@@ -106,7 +106,7 @@ export const safeComponentList = {
   SnapUICard,
   SnapUISelector,
   SnapUIAddress,
-  SnapFooterButton,
+  SnapUIFooterButton,
   FormTextField,
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
   CreateSnapAccount,
diff --git a/ui/components/app/snaps/snap-footer-button/index.scss b/ui/components/app/snaps/snap-footer-button/index.scss
deleted file mode 100644
index 10a830eccf80..000000000000
--- a/ui/components/app/snaps/snap-footer-button/index.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-.snap-footer-button {
-  &.mm-button-primary {
-    box-shadow: none;
-    color: var(--color-text-alternative);
-    background-color: var(--color-icon-default);
-
-    &:hover:not(&--disabled) {
-      opacity: 80%;
-      box-shadow: none;
-    }
-
-    &:active:not(&--disabled) {
-      opacity: 60%;
-    }
-  }
-
-  &.mm-button-secondary {
-    border-color: var(--color-icon-default);
-    color: var(--color-icon-default);
-
-    & span {
-      color: var(--color-icon-default);
-    }
-
-    &:hover:not(&--disabled) {
-      border-color: var(--color-icon-default);
-      color: var(--color-background-default);
-      background-color: var(--color-background-default-hover);
-      box-shadow: none;
-
-      & span {
-        color: var(--color-icon-default);
-      }
-    }
-
-    &:active:not(&--disabled) {
-      border-color: var(--color-icon-default);
-      opacity: 60%;
-
-      & span {
-        color: var(--color-icon-default);
-      }
-    }
-  }
-}
diff --git a/ui/components/app/snaps/snap-footer-button/index.ts b/ui/components/app/snaps/snap-footer-button/index.ts
deleted file mode 100644
index caec6d30d2f8..000000000000
--- a/ui/components/app/snaps/snap-footer-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './snap-footer-button';
diff --git a/ui/components/app/snaps/snap-ui-footer-button/index.scss b/ui/components/app/snaps/snap-ui-footer-button/index.scss
new file mode 100644
index 000000000000..db46c4928592
--- /dev/null
+++ b/ui/components/app/snaps/snap-ui-footer-button/index.scss
@@ -0,0 +1,51 @@
+.snap-ui-renderer__footer-button {
+  &:not(.hide-snap-branding) {
+    &.mm-button-primary {
+      box-shadow: none;
+      color: var(--color-text-alternative);
+      background-color: var(--color-icon-default);
+
+      &:hover:not(&--disabled) {
+        opacity: 80%;
+        box-shadow: none;
+      }
+
+      &:active:not(&--disabled) {
+        opacity: 60%;
+      }
+    }
+
+    &.mm-button-secondary {
+      border-color: var(--color-icon-default);
+      color: var(--color-icon-default);
+
+      & span {
+        color: var(--color-icon-default);
+      }
+
+      &:hover:not(&--disabled) {
+        border-color: var(--color-icon-default);
+        color: var(--color-background-default);
+        background-color: var(--color-background-default-hover);
+        box-shadow: none;
+
+        & span {
+          color: var(--color-icon-default);
+        }
+      }
+
+      &:active:not(&--disabled) {
+        border-color: var(--color-icon-default);
+        opacity: 60%;
+
+        & span {
+          color: var(--color-icon-default);
+        }
+      }
+    }
+  }
+
+  &--disabled {
+    cursor: default !important;
+  }
+}
diff --git a/ui/components/app/snaps/snap-ui-footer-button/index.ts b/ui/components/app/snaps/snap-ui-footer-button/index.ts
new file mode 100644
index 000000000000..83e2a7827f8a
--- /dev/null
+++ b/ui/components/app/snaps/snap-ui-footer-button/index.ts
@@ -0,0 +1 @@
+export * from './snap-ui-footer-button';
diff --git a/ui/components/app/snaps/snap-footer-button/snap-footer-button.tsx b/ui/components/app/snaps/snap-ui-footer-button/snap-ui-footer-button.tsx
similarity index 81%
rename from ui/components/app/snaps/snap-footer-button/snap-footer-button.tsx
rename to ui/components/app/snaps/snap-ui-footer-button/snap-ui-footer-button.tsx
index e2b8c9609714..fe513c042f93 100644
--- a/ui/components/app/snaps/snap-footer-button/snap-footer-button.tsx
+++ b/ui/components/app/snaps/snap-ui-footer-button/snap-ui-footer-button.tsx
@@ -19,19 +19,21 @@ import {
 import { useSnapInterfaceContext } from '../../../../contexts/snaps';
 import { SnapIcon } from '../snap-icon';
 import { getHideSnapBranding } from '../../../../selectors';
+import classnames from 'classnames';
 
-type SnapFooterButtonProps = {
+type SnapUIFooterButtonProps = {
   name?: string;
   isSnapAction?: boolean;
   onCancel?: () => void;
 };
 
-export const SnapFooterButton: FunctionComponent<
-  SnapFooterButtonProps & ButtonLinkProps<'button'>
+export const SnapUIFooterButton: FunctionComponent<
+  SnapUIFooterButtonProps & ButtonLinkProps<'button'>
 > = ({
   onCancel,
   name,
   children,
+  disabled = false,
   isSnapAction = false,
   type,
   form,
@@ -57,12 +59,16 @@ export const SnapFooterButton: FunctionComponent<
 
   return (
     <Button
-      className="snap-footer-button"
+      className={classnames('snap-ui-renderer__footer-button', {
+        'snap-ui-renderer__footer-button--disabled': disabled,
+        'no-snap-branding': hideSnapBranding,
+      })}
       type={type}
       form={form}
       {...props}
       size={ButtonSize.Lg}
       block
+      disabled={disabled}
       variant={isSnapAction ? ButtonVariant.Primary : ButtonVariant.Secondary}
       onClick={handleClick}
       textProps={{
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/container.ts b/ui/components/app/snaps/snap-ui-renderer/components/container.ts
index 5cc1dc27b8d5..cac6788f8c48 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/container.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/components/container.ts
@@ -61,7 +61,7 @@ export const container: UIComponentFactory<BoxElement> = ({
         className: 'snap-ui-renderer__footer-centered',
       },
       children: {
-        element: 'SnapFooterButton',
+        element: 'SnapUIFooterButton',
         key: 'default-button',
         props: {
           onCancel,
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/footer.ts b/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
index 6c65bcca5894..059ef1e26816 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
@@ -17,6 +17,7 @@ export const DEFAULT_FOOTER = {
     display: Display.Flex,
     flexDirection: FlexDirection.Row,
     width: BlockSize.Full,
+    gap: 4,
     padding: 4,
     className: 'snap-ui-renderer__footer',
     backgroundColor: BackgroundColor.backgroundDefault,
@@ -39,7 +40,7 @@ const getDefaultButtons = (
   // If onCancel is omitted by the caller we assume that it is safe to not display the default footer.
   if (children.length === 1 && onCancel) {
     return {
-      element: 'SnapFooterButton',
+      element: 'SnapUIFooterButton',
       key: 'default-button',
       props: {
         onCancel,
@@ -67,7 +68,7 @@ export const footer: UIComponentFactory<FooterElement> = ({
         element: children,
       } as UIComponentParams<ButtonElement>);
       return {
-        element: 'SnapFooterButton',
+        element: 'SnapUIFooterButton',
         key: `snap-footer-button-${buttonMapped.props?.name ?? index}`,
         props: {
           ...buttonMapped.props,
diff --git a/ui/components/app/snaps/snap-ui-renderer/index.scss b/ui/components/app/snaps/snap-ui-renderer/index.scss
index ff249372b9dd..d852e5317d1b 100644
--- a/ui/components/app/snaps/snap-ui-renderer/index.scss
+++ b/ui/components/app/snaps/snap-ui-renderer/index.scss
@@ -68,21 +68,5 @@
 
   &__footer {
     margin-top: auto;
-
-    &-centered {
-      margin-top: auto;
-
-      & button {
-        &:first-child {
-          margin-right: 0;
-        }
-      }
-    }
-
-    & button {
-      &:first-child {
-        margin-right: 16px;
-      }
-    }
   }
 }