diff --git a/commitlint.config.js b/commitlint.config.js
index 3eee94c..03c8493 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -33,6 +33,7 @@ export default {
'utils',
// component names
// add component name here when adding new component
+ 'button',
'page',
'ripple',
],
diff --git a/demos/components/button.html b/demos/components/button.html
new file mode 100644
index 0000000..a549fc3
--- /dev/null
+++ b/demos/components/button.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+ Button ยท Material-Me Component Demo
+
+
+
+
+
+
+
+ Button
+
+ Filled button
+ Elevated button
+ Tonal button
+ Outlined button
+ Text button
+
+
+
+
+
diff --git a/demos/index.html b/demos/index.html
index 7781404..4f6384d 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -37,6 +37,7 @@
Material-Me Demo
diff --git a/src/components/button.ts b/src/components/button.ts
new file mode 100644
index 0000000..195e496
--- /dev/null
+++ b/src/components/button.ts
@@ -0,0 +1 @@
+export * from './button/button';
diff --git a/src/components/button/button.css b/src/components/button/button.css
new file mode 100644
index 0000000..6066fa4
--- /dev/null
+++ b/src/components/button/button.css
@@ -0,0 +1,47 @@
+:host {
+ display: inline-flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ box-sizing: border-box;
+ position: relative;
+ background-color: rgb(var(--mm-color-primary));
+ color: rgb(var(--mm-color-on-primary));
+ font-size: 0.875rem;
+ text-transform: capitalize;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ border-radius: 20px;
+ padding: 10px 24px;
+ min-height: 40px;
+ cursor: pointer;
+ -webkit-user-select: none;
+ user-select: none;
+ --mm-ripple-color: currentColor;
+ transition: all 0.12s;
+}
+:host([type='elevated']) {
+ box-shadow: var(--mm-elevation-level1);
+ background-color: rgb(var(--mm-color-surface-container-low));
+ color: rgb(var(--mm-color-primary));
+}
+:host([type='elevated']:hover) {
+ box-shadow: var(--mm-elevation-level2);
+}
+:host([type='filled-tonal']) {
+ background-color: rgb(var(--mm-color-secondary-container));
+ color: rgb(var(--mm-color-on-secondary-container));
+}
+:host([type='filled-tonal']:hover) {
+ box-shadow: var(--mm-elevation-level1);
+}
+:host([type='outlined']) {
+ color: rgb(var(--mm-color-primary));
+ background-color: initial;
+ border: solid 1px rgb(var(--mm-color-outline));
+}
+:host([type='text']) {
+ color: rgb(var(--mm-color-primary));
+ background-color: initial;
+ padding: 10px 14px;
+}
diff --git a/src/components/button/button.html b/src/components/button/button.html
new file mode 100644
index 0000000..9b4fa0a
--- /dev/null
+++ b/src/components/button/button.html
@@ -0,0 +1,2 @@
+
+
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
new file mode 100644
index 0000000..06fb435
--- /dev/null
+++ b/src/components/button/button.ts
@@ -0,0 +1,23 @@
+import { useElement } from '../../core/element';
+import '../ripple';
+import template from './button.html';
+import style from './button.css';
+
+const name = 'mm-button';
+const props = {
+ type: 'filled' as
+ | 'elevated'
+ | 'filled'
+ | 'filled-tonal'
+ | 'outlined'
+ | 'text',
+};
+
+export class Button extends useElement({
+ template,
+ style,
+ props,
+ syncProps: ['type'],
+}) {}
+
+Button.define(name);
diff --git a/src/components/index.ts b/src/components/index.ts
index 6b1a9b7..9e5b503 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,2 +1,3 @@
+export * from './button';
export * from './page';
export * from './ripple';