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 1/6] 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

From 0a637d45485ca8038d4151dc3f0cbbf7f9a3b0c7 Mon Sep 17 00:00:00 2001
From: Lukas Matta <lukasmatta@users.noreply.github.com>
Date: Fri, 29 May 2026 15:49:07 +0200
Subject: [PATCH 2/6] Handle wrong nativeType in runtime

---
 .../components/cps-button/cps-button.component.ts | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

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 d0444921..4efcdd8a 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
@@ -7,7 +7,8 @@ import {
   Input,
   OnChanges,
   OnInit,
-  Output
+  Output,
+  SimpleChanges
 } from '@angular/core';
 import { getCSSColor } from '../../utils/colors-utils';
 import { CpsIconComponent, IconType } from '../cps-icon/cps-icon.component';
@@ -137,7 +138,7 @@ export class CpsButtonComponent implements OnInit, OnChanges {
     logMissingAriaLabelError('CpsButtonComponent', this.label, this.ariaLabel);
   }
 
-  ngOnChanges(): void {
+  ngOnChanges(changes: SimpleChanges): void {
     this.buttonColor = getCSSColor(this.color, this.document);
     this.borderRadius = convertSize(this.borderRadius);
     this.textColor =
@@ -149,6 +150,16 @@ export class CpsButtonComponent implements OnInit, OnChanges {
     }
     this.setClasses();
     logMissingAriaLabelError('CpsButtonComponent', this.label, this.ariaLabel);
+
+    if (
+      changes['nativeType]'] &&
+      !['button', 'submit', 'reset'].includes(this.nativeType)
+    ) {
+      console.warn(
+        `Invalid nativeType value: ${this.nativeType}. Expected 'button', 'submit', or 'reset'. Defaulting to 'button'.`
+      );
+      this.nativeType = 'button';
+    }
   }
 
   setClasses() {

From 3e402ffb8caa83c3384de7cc604f5b7df1c25f60 Mon Sep 17 00:00:00 2001
From: Lukas Matta <lukasmatta@users.noreply.github.com>
Date: Fri, 29 May 2026 16:07:26 +0200
Subject: [PATCH 3/6] Add example demostrating button's native type

---
 .../button-page/button-page.component.html    | 32 ++++++++++
 .../button-page/button-page.component.scss    | 12 ++++
 .../button-page/button-page.component.ts      | 35 ++++++++++-
 .../pages/button-page/button-page.examples.ts | 59 +++++++++++++++++++
 4 files changed, 135 insertions(+), 3 deletions(-)

diff --git a/projects/composition/src/app/pages/button-page/button-page.component.html b/projects/composition/src/app/pages/button-page/button-page.component.html
index 6a5c9a3a..920bee29 100644
--- a/projects/composition/src/app/pages/button-page/button-page.component.html
+++ b/projects/composition/src/app/pages/button-page/button-page.component.html
@@ -321,6 +321,38 @@
     </div>
   </app-code-example>
 
+  <app-code-example
+    label="Native types"
+    [htmlCode]="examples.nativeTypes.html"
+    [tsCode]="examples.nativeTypes.ts">
+    <form
+      class="native-types-form"
+      [formGroup]="nativeForm"
+      (ngSubmit)="onNativeSubmit($event)"
+      (reset)="onNativeReset()">
+      <cps-input label="Name" formControlName="name"></cps-input>
+      <div class="buttons-group-row">
+        <cps-button
+          label="Plain button"
+          nativeType="button"
+          type="outlined"
+          (clicked)="onNativePlainClick()"></cps-button>
+        <cps-button
+          label="Submit"
+          nativeType="submit"
+          color="luxury"></cps-button>
+        <cps-button
+          label="Reset"
+          nativeType="reset"
+          type="borderless"
+          color="surprise"></cps-button>
+      </div>
+      @if (nativeSubmitMessage) {
+        <div class="native-types-form__message">{{ nativeSubmitMessage }}</div>
+      }
+    </form>
+  </app-code-example>
+
   <app-code-example
     label="Miscellaneous"
     [htmlCode]="examples.misc.html"
diff --git a/projects/composition/src/app/pages/button-page/button-page.component.scss b/projects/composition/src/app/pages/button-page/button-page.component.scss
index d7e922b0..4619d0b6 100644
--- a/projects/composition/src/app/pages/button-page/button-page.component.scss
+++ b/projects/composition/src/app/pages/button-page/button-page.component.scss
@@ -27,3 +27,15 @@
   padding-left: 1.125rem;
   padding-right: 1.125rem;
 }
+
+.native-types-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 25rem;
+
+  &__message {
+    color: var(--cps-color-depth);
+    font-style: italic;
+  }
+}
diff --git a/projects/composition/src/app/pages/button-page/button-page.component.ts b/projects/composition/src/app/pages/button-page/button-page.component.ts
index 8866a19a..9221029c 100644
--- a/projects/composition/src/app/pages/button-page/button-page.component.ts
+++ b/projects/composition/src/app/pages/button-page/button-page.component.ts
@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
-import { CpsButtonComponent } from 'cps-ui-kit';
+import { Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { CpsButtonComponent, CpsInputComponent } from 'cps-ui-kit';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
 import { CodeExampleComponent } from '../../components/code-example/code-example.component';
 
@@ -10,7 +11,9 @@ import { buttonExamples } from './button-page.examples';
   imports: [
     CpsButtonComponent,
     ComponentDocsViewerComponent,
-    CodeExampleComponent
+    CodeExampleComponent,
+    CpsInputComponent,
+    ReactiveFormsModule
   ],
   selector: 'app-button-page',
   templateUrl: './button-page.component.html',
@@ -18,13 +21,39 @@ import { buttonExamples } from './button-page.examples';
   host: { class: 'composition-page' }
 })
 export class ButtonPageComponent {
+  private readonly fb = inject(FormBuilder);
+
   componentData = ComponentData;
   isLoading = false;
 
+  nativeForm = this.fb.nonNullable.group({
+    name: ['', Validators.required]
+  });
+
+  nativeSubmitMessage = '';
+
   onClickForLoading() {
     this.isLoading = true;
     setTimeout(() => (this.isLoading = false), 2000);
   }
 
+  onNativePlainClick() {
+    this.nativeSubmitMessage = 'Plain button clicked (no form action).';
+  }
+
+  onNativeSubmit(event: Event) {
+    event.preventDefault();
+    if (this.nativeForm.invalid) {
+      this.nativeSubmitMessage = 'Form is invalid.';
+      return;
+    }
+    this.nativeSubmitMessage = `Form submitted with name: "${this.nativeForm.value.name}"`;
+  }
+
+  onNativeReset() {
+    this.nativeForm.reset();
+    this.nativeSubmitMessage = '';
+  }
+
   readonly examples = buttonExamples;
 }
diff --git a/projects/composition/src/app/pages/button-page/button-page.examples.ts b/projects/composition/src/app/pages/button-page/button-page.examples.ts
index aea25ab9..23aa0bf2 100644
--- a/projects/composition/src/app/pages/button-page/button-page.examples.ts
+++ b/projects/composition/src/app/pages/button-page/button-page.examples.ts
@@ -92,6 +92,65 @@ export const buttonExamples: Record<string, { html: string; ts?: string }> = {
 <cps-button [loading]="true" size="xsmall" type="borderless" ariaLabel="Loading button"></cps-button>`
   },
 
+  nativeTypes: {
+    html: `
+<form
+  class="native-types-form"
+  [formGroup]="nativeForm"
+  (ngSubmit)="onNativeSubmit($event)"
+  (reset)="onNativeReset()">
+  <cps-input label="Name" formControlName="name"></cps-input>
+  <div class="buttons-group-row">
+    <cps-button
+      label="Plain button"
+      nativeType="button"
+      type="outlined"
+      (clicked)="onNativePlainClick()"></cps-button>
+    <cps-button
+      label="Submit"
+      nativeType="submit"
+      color="luxury"></cps-button>
+    <cps-button
+      label="Reset"
+      nativeType="reset"
+      type="borderless"
+      color="surprise"></cps-button>
+  </div>
+  @if (nativeSubmitMessage) {
+    <div class="native-types-form__message">{{ nativeSubmitMessage }}</div>
+  }
+</form>`,
+    ts: `
+private readonly fb = inject(FormBuilder);
+
+componentData = ComponentData;
+isLoading = false;
+
+nativeForm = this.fb.nonNullable.group({
+  name: ['', Validators.required]
+});
+
+nativeSubmitMessage = '';
+
+onNativePlainClick() {
+  this.nativeSubmitMessage = 'Plain button clicked (no form action).';
+}
+
+onNativeSubmit(event: Event) {
+  event.preventDefault();
+  if (this.nativeForm.invalid) {
+    this.nativeSubmitMessage = 'Form is invalid.';
+    return;
+  }
+  this.nativeSubmitMessage = "Form submitted with name: " + this.nativeForm.value.name;
+}
+
+onNativeReset() {
+  this.nativeForm.reset();
+  this.nativeSubmitMessage = '';
+}`
+  },
+
   misc: {
     html: `
 <!-- Interactive loading state -->

From 2f0231378b790a567483c030c22dbb29f7bb473b Mon Sep 17 00:00:00 2001
From: Lukas Matta <lukasmatta@users.noreply.github.com>
Date: Fri, 29 May 2026 16:14:18 +0200
Subject: [PATCH 4/6] Add tests to cover null/undefined handling

---
 .../cps-button/cps-button.component.spec.ts        | 14 ++++++++++++++
 .../components/cps-button/cps-button.component.ts  |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

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 8bd235e1..3fb60307 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
@@ -280,6 +280,20 @@ describe('CpsButtonComponent', () => {
       const button = fixture.nativeElement.querySelector('button');
       expect(button.getAttribute('type')).toBe('submit');
     });
+
+    it('should fall back to "button" native type if nativeType set to null', () => {
+      fixture.componentRef.setInput('nativeType', null);
+      fixture.detectChanges();
+      const button = fixture.nativeElement.querySelector('button');
+      expect(button.getAttribute('type')).toBe('button');
+    });
+
+    it('should fall back to "button" native type if nativeType set to undefined', () => {
+      fixture.componentRef.setInput('nativeType', undefined);
+      fixture.detectChanges();
+      const button = fixture.nativeElement.querySelector('button');
+      expect(button.getAttribute('type')).toBe('button');
+    });
   });
 
   describe('aria-label', () => {
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 4efcdd8a..148158ac 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
@@ -152,7 +152,7 @@ export class CpsButtonComponent implements OnInit, OnChanges {
     logMissingAriaLabelError('CpsButtonComponent', this.label, this.ariaLabel);
 
     if (
-      changes['nativeType]'] &&
+      changes.nativeType &&
       !['button', 'submit', 'reset'].includes(this.nativeType)
     ) {
       console.warn(

From 246d10f7e18b82ae863952a2f26fb65bfe5fa310 Mon Sep 17 00:00:00 2001
From: Lukas Matta <lukasmatta@users.noreply.github.com>
Date: Fri, 29 May 2026 16:21:54 +0200
Subject: [PATCH 5/6] Check console.warn + invalid string values for nativeType

---
 .../cps-button/cps-button.component.spec.ts   | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

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 3fb60307..62969c9a 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
@@ -294,6 +294,29 @@ describe('CpsButtonComponent', () => {
       const button = fixture.nativeElement.querySelector('button');
       expect(button.getAttribute('type')).toBe('button');
     });
+
+    it('should fall back to "button" and warn if nativeType is an invalid string', () => {
+      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      fixture.componentRef.setInput('nativeType', 'invalid-type');
+      fixture.detectChanges();
+      const button = fixture.nativeElement.querySelector('button');
+      expect(button.getAttribute('type')).toBe('button');
+      expect(component.nativeType).toBe('button');
+      expect(warnSpy).toHaveBeenCalledWith(
+        expect.stringContaining('Invalid nativeType value')
+      );
+      warnSpy.mockRestore();
+    });
+
+    it('should not warn for valid nativeType values', () => {
+      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      fixture.componentRef.setInput('nativeType', 'submit');
+      fixture.detectChanges();
+      fixture.componentRef.setInput('nativeType', 'reset');
+      fixture.detectChanges();
+      expect(warnSpy).not.toHaveBeenCalled();
+      warnSpy.mockRestore();
+    });
   });
 
   describe('aria-label', () => {

From 5cd93791ac4c88453275d968a9b235fd331ab132 Mon Sep 17 00:00:00 2001
From: Lukas Matta <lukasmatta@users.noreply.github.com>
Date: Fri, 29 May 2026 16:54:20 +0200
Subject: [PATCH 6/6] Fix layout shift

---
 .../src/app/pages/button-page/button-page.component.html    | 6 +++---
 .../src/app/pages/button-page/button-page.component.scss    | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/projects/composition/src/app/pages/button-page/button-page.component.html b/projects/composition/src/app/pages/button-page/button-page.component.html
index 920bee29..df51c30e 100644
--- a/projects/composition/src/app/pages/button-page/button-page.component.html
+++ b/projects/composition/src/app/pages/button-page/button-page.component.html
@@ -347,9 +347,9 @@
           type="borderless"
           color="surprise"></cps-button>
       </div>
-      @if (nativeSubmitMessage) {
-        <div class="native-types-form__message">{{ nativeSubmitMessage }}</div>
-      }
+      <div class="native-types-form__message" aria-live="polite">
+        {{ nativeSubmitMessage }}
+      </div>
     </form>
   </app-code-example>
 
diff --git a/projects/composition/src/app/pages/button-page/button-page.component.scss b/projects/composition/src/app/pages/button-page/button-page.component.scss
index 4619d0b6..e45d93fd 100644
--- a/projects/composition/src/app/pages/button-page/button-page.component.scss
+++ b/projects/composition/src/app/pages/button-page/button-page.component.scss
@@ -37,5 +37,6 @@
   &__message {
     color: var(--cps-color-depth);
     font-style: italic;
+    min-height: 1.5em;
   }
 }