diff --git a/src/button/button.directive.ts b/src/button/button.directive.ts
new file mode 100644
index 0000000000..85efc9e5db
--- /dev/null
+++ b/src/button/button.directive.ts
@@ -0,0 +1,57 @@
+import {
+ Directive,
+ HostBinding,
+ Input,
+ OnInit
+} from "@angular/core";
+
+/**
+ * A convinence directive for applying styling to a button.
+ *
+ * Example:
+ *
+ * ```hmtl
+ *
+ *
+ * ```
+ *
+ * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/button/code) for more detail.
+ */
+@Directive({
+ selector: "[ibmButton]"
+})
+export class Button implements OnInit {
+ /**
+ * sets the button type
+ */
+ @Input() ibmButton: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--primary" = "primary";
+ /**
+ * Specify the size of the button
+ */
+ @Input() size: "normal" | "sm" = "normal";
+ // a whole lot of HostBindings ... this way we don't have to touch the elementRef directly
+ @HostBinding("class") btnClass = "bx--btn";
+ @HostBinding("class.bx--btn--primary") primary = true;
+ @HostBinding("class.bx--btn--secondary") secondary = false;
+ @HostBinding("class.bx--btn--tertiary") tertiary = false;
+ @HostBinding("class.bx--btn--ghost") ghost = false;
+ @HostBinding("class.bx--btn--danger") danger = false;
+ @HostBinding("class.bx--btn--danger--primary") dangerPrimary = false;
+ @HostBinding("class.bx--btn--sm") smallSize = false;
+
+ ngOnInit() {
+ if (this.size === "sm") {
+ this.smallSize = true;
+ }
+ this.primary = false;
+ switch (this.ibmButton) {
+ case "primary": this.primary = true; break;
+ case "secondary": this.secondary = true; break;
+ case "tertiary": this.tertiary = true; break;
+ case "ghost": this.ghost = true; break;
+ case "danger": this.danger = true; break;
+ case "danger--primary": this.dangerPrimary = true; break;
+ default: this.primary = true; break;
+ }
+ }
+}
diff --git a/src/button/button.module.ts b/src/button/button.module.ts
new file mode 100644
index 0000000000..90af01b04a
--- /dev/null
+++ b/src/button/button.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { Button } from "./button.directive";
+
+export { Button } from "./button.directive";
+
+@NgModule({
+ declarations: [Button],
+ exports: [Button],
+ imports: [CommonModule]
+})
+export class ButtonModule { }
diff --git a/src/button/button.stories.ts b/src/button/button.stories.ts
new file mode 100644
index 0000000000..28adf10e4c
--- /dev/null
+++ b/src/button/button.stories.ts
@@ -0,0 +1,44 @@
+import { storiesOf, moduleMetadata } from "@storybook/angular";
+import { withNotes } from "@storybook/addon-notes";
+import { action } from "@storybook/addon-actions";
+import { withKnobs, boolean, object } from "@storybook/addon-knobs/angular";
+
+import { ButtonModule } from "../";
+
+storiesOf("Button", module)
+ .addDecorator(
+ moduleMetadata({
+ imports: [ButtonModule]
+ })
+ )
+ .addDecorator(withKnobs)
+ .add("Basic", () => ({
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+ `
+ }))
+ .add("Small", () => ({
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+ `
+ }));
diff --git a/src/index.ts b/src/index.ts
index ae57ed33b3..de47fa6545 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -14,3 +14,4 @@ export * from "./pill-input/pill-input.module";
export * from "./utils/position";
export * from "./content-switcher/content-switcher.module";
export * from "./accordion/accordion.module";
+export * from "./button/button.module";