angular · milomg · May 21, 2025
diff --git a/devtools/projects/ng-devtools/src/lib/shared/button/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/shared/button/BUILD.bazel
@@ -0,0 +1,43 @@
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
+load("//devtools/tools:ng_project.bzl", "ng_project")
+load("//devtools/tools:typescript.bzl", "ts_test_library")
+
+package(default_visibility = ["//devtools:__subpackages__"])
+
+sass_binary(
+    name = "button_component_styles",
+    src = "button.component.scss",
+    deps = [
+        "//devtools/projects/ng-devtools/src/styles:typography",
+    ],
+)
+
+ng_project(
+    name = "button",
+    srcs = ["button.component.ts"],
+    angular_assets = [
+        ":button_component_styles",
+    ],
+    interop_deps = [
+        "//packages/core",
+    ],
+)
+
+ts_test_library(
+    name = "button_test",
+    srcs = ["button.component.spec.ts"],
+    interop_deps = [
+        ":button",
+        "//packages/core/testing",
+        "//packages/platform-browser",
+    ],
+)
+
+karma_web_test_suite(
+    name = "test",
+    visibility = ["//visibility:public"],
+    deps = [
+        ":button_test",
+    ],
+)
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
@@ -0,0 +1,18 @@
+@use '../../../styles/typography';
+
+:host {
+  @extend %body-01;
+  border: none;
+  cursor: pointer;
+  padding: 0.375rem 0.75rem;
+
+  &.size-compact {
+    padding: 0.1rem 0.5rem;
+  }
+
+  &.type-primary {
+    border-radius: 2rem;
+    background: var(--dynamic-blue-02);
+    color: var(--septenary-contrast);
+  }
+}
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
@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ButtonComponent} from './button.component';
+
+describe('ButtonComponent', () => {
+  let component: ButtonComponent;
+  let fixture: ComponentFixture<ButtonComponent>;
+  let element: Element;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ButtonComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+    element = fixture.debugElement.nativeElement;
+    fixture.detectChanges();
+  });
+
+  it('should be primary type by default', () => {
+    expect(component.btnType()).toEqual('primary');
+    expect(element.classList.contains('type-primary')).toBeTrue();
+  });
+
+  it('should be standard size by default', () => {
+    expect(component.size()).toEqual('standard');
+    expect(element.classList.contains('size-compact')).toBeFalse();
+  });
+
+  it('should be compact size', () => {
+    fixture.componentRef.setInput('size', 'compact');
+    fixture.detectChanges();
+
+    expect(element.classList.contains('size-compact')).toBeTrue();
+  });
+});
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
@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {ChangeDetectionStrategy, Component, input} from '@angular/core';
+
+type ButtonType = 'primary'; // To be extended in future
+type ButtonSize = 'standard' | 'compact';
+
+@Component({
+  selector: 'button[ng-button]',
+  template: '<ng-content/>',
+  styleUrl: './button.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'ng-button',
+    '[class.type-primary]': `btnType() === 'primary'`,
+    '[class.size-compact]': `size() === 'compact'`,
+  },
+})
+export class ButtonComponent {
+  readonly btnType = input<ButtonType>('primary');
+  readonly size = input<ButtonSize>('standard');
+}
diff --git a/devtools/projects/ng-devtools/src/styles/_colors.scss b/devtools/projects/ng-devtools/src/styles/_colors.scss
@@ -69,6 +69,7 @@ $_colors: (
   --dynamic-red-02: var(--red-06);
   --dynamic-green-01: var(--green-01);
   --dynamic-blue-01: var(--blue-05);
+  --dynamic-blue-02: var(--blue-02);
   --dynamic-purple-01: var(--purple-01);
 
   --dynamic-transparent-01: var(--transparent-04);
@@ -109,6 +110,7 @@ $_colors: (
   --dynamic-red-02: var(--red-01);
   --dynamic-green-01: var(--green-03);
   --dynamic-blue-01: var(--blue-01);
+  --dynamic-blue-02: var(--blue-03);
   --dynamic-purple-01: var(--purple-03);
 
   --dynamic-transparent-01: var(--transparent-03);