diff --git a/app/pods/components/search-button/component.js b/app/pods/components/search-button/component.js
new file mode 100644
index 0000000..e37949d
--- /dev/null
+++ b/app/pods/components/search-button/component.js
@@ -0,0 +1,13 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  isLoading: false,
+  buttonText: 'Search',
+  actions: {
+    showLoading: function() {
+      if (!this.get('isLoading')) {
+        this.sendAction('action');
+      }
+    }
+  }
+});
diff --git a/app/pods/components/search-button/template.hbs b/app/pods/components/search-button/template.hbs
new file mode 100644
index 0000000..4bd6134
--- /dev/null
+++ b/app/pods/components/search-button/template.hbs
@@ -0,0 +1,7 @@
+<a class="action button-gray smaller right" {{action 'showLoading'}}>
+  {{#if isLoading}}
+    LOADING
+  {{else}}
+    {{buttonText}}
+  {{/if}}
+</a>
diff --git a/tests/unit/pods/components/search-button/component-test.js b/tests/unit/pods/components/search-button/component-test.js
new file mode 100644
index 0000000..6381186
--- /dev/null
+++ b/tests/unit/pods/components/search-button/component-test.js
@@ -0,0 +1,19 @@
+import { moduleForComponent, test } from 'ember-qunit';
+
+moduleForComponent('search-button', 'Unit | Component | search button', {
+  // Specify the other units that are required for this test
+  // needs: ['component:foo', 'helper:bar'],
+  unit: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Creates the component instance
+  var component = this.subject();
+  assert.equal(component._state, 'preRender');
+
+  // Renders the component to the page
+  this.render();
+  assert.equal(component._state, 'inDOM');
+});