diff --git a/src/components/keyboard-button.component.ts b/src/components/keyboard-button.component.ts
new file mode 100644
index 00000000..65a2e9d1
--- /dev/null
+++ b/src/components/keyboard-button.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit, Input } from 'angular2/core';
+
+@Component({
+    selector: 'keyboard-button',
+    template:
+    `
+         <svg xmlns="http://www.w3.org/2000/svg" [attr.width]="width" [attr.height]="height" [attr.fill]="fill">
+             <rect [id]="id" [attr.rx]="rx" [attr.ry]="ry" [attr.height]="height" [attr.width]="width"/>
+         </svg>
+     `,
+    styles:
+    [`
+        :host {
+           display: flex;
+        }
+    `],
+})
+export class KeyboardButtonComponent implements OnInit {
+    @Input() id: string;
+    @Input() rx: string;
+    @Input() ry: string;
+    @Input() height: string;
+    @Input() width: string;
+    @Input() fill: string;
+
+    constructor() { }
+
+    ngOnInit() { }
+
+}
\ No newline at end of file
diff --git a/src/components/keyboard-button.model.ts b/src/components/keyboard-button.model.ts
new file mode 100644
index 00000000..d9c1e690
--- /dev/null
+++ b/src/components/keyboard-button.model.ts
@@ -0,0 +1,10 @@
+export interface KeyboardButton {
+    id: string;
+    x: string;
+    y: string;
+    rx: string;
+    ry: string;
+    height: string;
+    width: string;
+    fill: string;
+}
\ No newline at end of file