From 300f67a2c9c0b991265a55a2ae81e577e0b3dd8f Mon Sep 17 00:00:00 2001
From: Lukas Matta <lukasmatta0+git@gmail.com>
Date: Thu, 21 May 2026 18:18:01 +0200
Subject: [PATCH] feat(button): Add native type

---
 .../src/app/api-data/cps-button.json          |  8 +++++
 .../cps-button/cps-button.component.html      |  2 +-
 .../cps-button/cps-button.component.spec.ts   | 31 +++++++++++++++++++
 .../cps-button/cps-button.component.ts        |  6 ++++
 4 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/projects/composition/src/app/api-data/cps-button.json b/projects/composition/src/app/api-data/cps-button.json
index 90853e0e..ccfd635f 100644
--- a/projects/composition/src/app/api-data/cps-button.json
+++ b/projects/composition/src/app/api-data/cps-button.json
@@ -37,6 +37,14 @@
                         "default": "solid",
                         "description": "Type of the button in terms of appearance, it can be 'solid' or 'outlined' or 'borderless'."
                     },
+                    {
+                        "name": "nativeType",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "'button' | 'submit' | 'reset'",
+                        "default": "button",
+                        "description": "Native HTML button type attribute, it can be 'button', 'submit' or 'reset'."
+                    },
                     {
                         "name": "label",
                         "optional": false,
diff --git a/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.html b/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.html
index 671273a7..bbfb0140 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.html
@@ -1,6 +1,6 @@
 <div>
   <button
-    type="button"
+    [attr.type]="nativeType"
     [ngClass]="classesList"
     [disabled]="disabled"
     (click)="onClick($event)"
diff --git a/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.spec.ts b/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.spec.ts
index 51d4dbd0..8bd235e1 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.spec.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.spec.ts
@@ -25,6 +25,7 @@ describe('CpsButtonComponent', () => {
     expect(component.contentColor).toBe('white');
     expect(component.borderRadius).toBe('0.25rem');
     expect(component.type).toBe('solid');
+    expect(component.nativeType).toBe('button');
     expect(component.label).toBe('');
     expect(component.icon).toBe('');
     expect(component.iconPosition).toBe('before');
@@ -251,6 +252,36 @@ describe('CpsButtonComponent', () => {
     expect(component.enterActive).toBe(false);
   });
 
+  describe('nativeType', () => {
+    it('should default native type attribute to "button"', () => {
+      const button = fixture.nativeElement.querySelector('button');
+      expect(button.getAttribute('type')).toBe('button');
+    });
+
+    it('should set native type attribute to "submit"', () => {
+      fixture.componentRef.setInput('nativeType', 'submit');
+      fixture.detectChanges();
+      const button = fixture.nativeElement.querySelector('button');
+      expect(button.getAttribute('type')).toBe('submit');
+    });
+
+    it('should set native type attribute to "reset"', () => {
+      fixture.componentRef.setInput('nativeType', 'reset');
+      fixture.detectChanges();
+      const button = fixture.nativeElement.querySelector('button');
+      expect(button.getAttribute('type')).toBe('reset');
+    });
+
+    it('should not affect styling type when nativeType changes', () => {
+      fixture.componentRef.setInput('type', 'outlined');
+      fixture.componentRef.setInput('nativeType', 'submit');
+      fixture.detectChanges();
+      expect(component.classesList).toContain('cps-button--outlined');
+      const button = fixture.nativeElement.querySelector('button');
+      expect(button.getAttribute('type')).toBe('submit');
+    });
+  });
+
   describe('aria-label', () => {
     it('should set aria-label from ariaLabel input', () => {
       fixture.componentRef.setInput('ariaLabel', 'Save');
diff --git a/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.ts b/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.ts
index c7e6988c..12aa3bfc 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.ts
@@ -49,6 +49,12 @@ export class CpsButtonComponent implements OnChanges {
    */
   @Input() type: 'solid' | 'outlined' | 'borderless' = 'solid';
 
+  /**
+   * Native HTML button type attribute, it can be 'button', 'submit' or 'reset'.
+   * @group Props
+   */
+  @Input() nativeType: 'button' | 'submit' | 'reset' = 'button';
+
   /**
    * Label or text on the button.
    * @group Props