diff --git a/test/benchmarks/material/button/BUILD.bazel b/test/benchmarks/material/button/BUILD.bazel
new file mode 100644
index 000000000000..5aab92e7a130
--- /dev/null
+++ b/test/benchmarks/material/button/BUILD.bazel
@@ -0,0 +1,22 @@
+load("@npm_angular_dev_infra_private//benchmark/component_benchmark:component_benchmark.bzl", "component_benchmark")
+
+# TODO(wagnermaciel): Update this target to provide indigo-pink in a way that doesn't require having to import it with
+# stylesUrls inside the components once `component_benchmark` supports asset injection.
+
+component_benchmark(
+ name = "benchmark",
+ driver = ":button.perf-spec.ts",
+ driver_deps = [
+ "@npm//@angular/dev-infra-private",
+ "@npm//protractor",
+ "@npm//@types/jasmine",
+ ],
+ ng_deps = [
+ "@npm//@angular/core",
+ "@npm//@angular/platform-browser",
+ "//src/material/button",
+ ],
+ ng_srcs = [":app.module.ts"],
+ prefix = "",
+ styles = ["//src/material/prebuilt-themes:indigo-pink"],
+)
diff --git a/test/benchmarks/material/button/app.module.ts b/test/benchmarks/material/button/app.module.ts
new file mode 100644
index 000000000000..b55b17a87b92
--- /dev/null
+++ b/test/benchmarks/material/button/app.module.ts
@@ -0,0 +1,42 @@
+/**
+ * @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.io/license
+ */
+
+import {Component, NgModule, ViewEncapsulation} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {MatButtonModule} from '@angular/material/button';
+
+@Component({
+ selector: 'app-root',
+ template: `
+
+
+
+
+ `,
+ encapsulation: ViewEncapsulation.None,
+ styleUrls: ['//src/material/core/theming/prebuilt/indigo-pink.css'],
+})
+export class ButtonBenchmarkApp {
+ isChecked = false;
+ isVisible = false;
+
+ show() { this.isVisible = true; }
+ hide() { this.isVisible = false; }
+}
+
+
+@NgModule({
+ declarations: [ButtonBenchmarkApp],
+ imports: [
+ BrowserModule,
+ MatButtonModule,
+ ],
+ providers: [],
+ bootstrap: [ButtonBenchmarkApp],
+})
+export class AppModule {}
diff --git a/test/benchmarks/material/button/button.perf-spec.ts b/test/benchmarks/material/button/button.perf-spec.ts
new file mode 100644
index 000000000000..1030f68d2669
--- /dev/null
+++ b/test/benchmarks/material/button/button.perf-spec.ts
@@ -0,0 +1,38 @@
+/**
+ * @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.io/license
+ */
+
+import {$, browser} from 'protractor';
+import {runBenchmark} from '@angular/dev-infra-private/benchmark/driver-utilities';
+
+describe('button performance benchmarks', () => {
+ beforeAll(() => {
+ browser.rootEl = '#root';
+ });
+
+ it('renders a basic raised button', async() => {
+ await runBenchmark({
+ id: 'button-render',
+ url: '',
+ ignoreBrowserSynchronization: true,
+ params: [],
+ prepare: async () => await $('#hide').click(),
+ work: async () => await $('#show').click(),
+ });
+ });
+
+ it('clicks a basic raised button', async() => {
+ await runBenchmark({
+ id: 'button-click',
+ url: '',
+ ignoreBrowserSynchronization: true,
+ params: [],
+ setup: async () => await $('#show').click(),
+ work: async () => await $('.mat-raised-button').click(),
+ });
+ });
+});
diff --git a/test/benchmarks/material/checkbox/app.module.ts b/test/benchmarks/material/checkbox/app.module.ts
index 60deb1877285..2f27c13248c0 100644
--- a/test/benchmarks/material/checkbox/app.module.ts
+++ b/test/benchmarks/material/checkbox/app.module.ts
@@ -17,13 +17,11 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
-
-
- Check me!
-
+
+ Check me!
`,
encapsulation: ViewEncapsulation.None,
styleUrls: ['//src/material/core/theming/prebuilt/indigo-pink.css'],
@@ -47,6 +45,6 @@ export class CheckboxBenchmarkApp {
MatCheckboxModule,
],
providers: [],
- bootstrap: [CheckboxBenchmarkApp]
+ bootstrap: [CheckboxBenchmarkApp],
})
export class AppModule {}