diff --git a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.html b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.html
index 2097d35..b740468 100644
--- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.html
+++ b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.html
@@ -135,7 +135,6 @@
       hostClass="checkout-payment__action-btn"
       buttonClass="w-100"
       [disabled]="true"
-      (click)="cancelStep.emit()"
     >
       Cancelar
     </app-button>
diff --git a/src/app/shared/components/button/button.component.ts b/src/app/shared/components/button/button.component.ts
index c202cc6..95166ae 100644
--- a/src/app/shared/components/button/button.component.ts
+++ b/src/app/shared/components/button/button.component.ts
@@ -17,7 +17,9 @@ export type ButtonVariant =
   styleUrl: './button.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
-    '[class]': 'hostClass()'
+    '[class]': 'hostClasses()',
+    '[attr.aria-disabled]': 'disabled()',
+    '(click)': 'onHostClick($event)'
   }
 })
 export class ButtonComponent {
@@ -26,6 +28,9 @@ export class ButtonComponent {
   readonly disabled = input(false);
   readonly hostClass = input<string>('');
   readonly buttonClass = input<string>('');
+  protected readonly hostClasses = computed(() =>
+    [this.hostClass(), this.disabled() ? 'app-button--disabled' : ''].filter(Boolean).join(' ')
+  );
 
   protected readonly buttonClasses = computed(() => {
     const variants: Record<ButtonVariant, string> = {
@@ -40,4 +45,14 @@ export class ButtonComponent {
 
     return ['btn', variants[this.variant()], this.buttonClass()];
   });
+
+  protected onHostClick(event: Event): void {
+    if (!this.disabled()) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+  }
 }