From 0fd8477f3f95d48e29e9e36b341aa0dd831aba6b Mon Sep 17 00:00:00 2001
From: hawkgs <hawk.dvp@gmail.com>
Date: Fri, 9 Jan 2026 13:28:26 +0200
Subject: [PATCH] refactor(devtools): add secondary type button

Add a secondary style/type button to `ng-button`.

(cherry picked from commit bea5840864444c252b9a80420be3058036c8bc29)
---
 .../src/lib/shared/button/button.component.scss           | 8 ++++++++
 .../src/lib/shared/button/button.component.spec.ts        | 5 +++++
 .../ng-devtools/src/lib/shared/button/button.component.ts | 3 ++-
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/devtools/projects/ng-devtools/src/lib/shared/button/button.component.scss b/devtools/projects/ng-devtools/src/lib/shared/button/button.component.scss
index d4aa9310f8c..118580ecd21 100644
--- a/devtools/projects/ng-devtools/src/lib/shared/button/button.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/shared/button/button.component.scss
@@ -20,6 +20,14 @@
     color: var(--septenary-contrast);
   }
 
+  &.type-secondary {
+    border-radius: 2rem;
+    background: transparent;
+    box-sizing: border-box;
+    border: 1px solid var(--quaternary-contrast);
+    color: var(--color-text);
+  }
+
   &.type-icon {
     background: transparent;
     border: none;
diff --git a/devtools/projects/ng-devtools/src/lib/shared/button/button.component.spec.ts b/devtools/projects/ng-devtools/src/lib/shared/button/button.component.spec.ts
index 6cfeb0a58fd..25e69b85c90 100644
--- a/devtools/projects/ng-devtools/src/lib/shared/button/button.component.spec.ts
+++ b/devtools/projects/ng-devtools/src/lib/shared/button/button.component.spec.ts
@@ -31,6 +31,11 @@ describe('ButtonComponent', () => {
     expect(element.classList.contains('size-compact')).toBeFalse();
   });
 
+  it('should change the type to secondary', () => {
+    expect(component.btnType()).toEqual('secondary');
+    expect(element.classList.contains('type-secondary')).toBeTrue();
+  });
+
   it('should be compact size', async () => {
     fixture.componentRef.setInput('size', 'compact');
     await fixture.whenStable();
diff --git a/devtools/projects/ng-devtools/src/lib/shared/button/button.component.ts b/devtools/projects/ng-devtools/src/lib/shared/button/button.component.ts
index 10f6739369b..925823f73ed 100644
--- a/devtools/projects/ng-devtools/src/lib/shared/button/button.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/shared/button/button.component.ts
@@ -8,7 +8,7 @@
 
 import {ChangeDetectionStrategy, Component, input} from '@angular/core';
 
-type ButtonType = 'primary' | 'icon';
+type ButtonType = 'primary' | 'secondary' | 'icon';
 type ButtonSize = 'standard' | 'mid' | 'compact';
 
 @Component({
@@ -19,6 +19,7 @@ type ButtonSize = 'standard' | 'mid' | 'compact';
   host: {
     class: 'ng-button',
     '[class.type-primary]': `btnType() === 'primary'`,
+    '[class.type-secondary]': `btnType() === 'secondary'`,
     '[class.type-icon]': `btnType() === 'icon'`,
     '[class.size-compact]': `size() === 'compact'`,
     '[class.size-mid]': `size() === 'mid'`,