diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts
index 45e30e8635..cd6a301503 100644
--- a/demos/component-docs/index.ts
+++ b/demos/component-docs/index.ts
@@ -1,6 +1,6 @@
 import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms';
 import {App, IonicApp, ActionSheet, NavController, NavParams} from 'ionic/ionic';
-import {Modal, IonicView, IonicConfig, Events, Animation} from 'ionic/ionic';
+import {Popup, Modal, IonicView, IonicConfig, Events, Animation} from 'ionic/ionic';
 import {NavigationDetailsPage} from 'navigation';
 
 import {TabsPage} from 'tabs';
@@ -20,12 +20,14 @@ export class MainPage {
               nav: NavController,
               actionSheet: ActionSheet,
               params: NavParams,
+              popup: Popup,
               modal: Modal,
               events: Events)
   {
     this.params = params;
     this.nav = nav;
     this.modal = modal;
+    this.popup = popup;
     this.actionSheet = actionSheet;
     this.navDetailsPage = NavigationDetailsPage;
     this.demoModal = DemoModal;
@@ -41,7 +43,8 @@ export class MainPage {
       zone.run(() => {
         if (e.data) {
           var data = JSON.parse(e.data);
-          this.component.title = helpers.toTitleCase(data.hash.replace('-', ' '));
+          this.component.title = helpers.toTitleCase(data.hash.replace(/-/g, ' '));
+          console.log(this.component.title);
           if (this.component.title === 'Tabs') {
             this.nav.setRoot(TabsPage);
           }
@@ -102,6 +105,15 @@ export class MainPage {
     });
   }
 
+  // **************************
+  // Popup
+  // **************************
+  showPopup() {
+    this.popup.alert("Popup Title").then(() => {
+    });
+  }
+
+
   // **************************
   // Form
   // **************************
diff --git a/demos/component-docs/main.html b/demos/component-docs/main.html
index e30af01893..607d451811 100644
--- a/demos/component-docs/main.html
+++ b/demos/component-docs/main.html
@@ -123,32 +123,43 @@
       <button dark outline>Dark</button>
     </p>
 
-  </section>
+  </section>  
 
-  <section id="outline-buttons" [ng-class]="{hidden: component.title !== 'Outline Buttons' }" class="section-padding">
+  <section id="round-buttons" [ng-class]="{hidden: component.title !== 'Round Buttons' }" class="section-padding">
 
     <p>
-      <button outline>Default</button>
+      <button round>Default</button>
     </p>
 
     <p>
-      <button secondary outline>Secondary</button>
+      <button secondary round>Secondary</button>
     </p>
 
     <p>
-      <button danger outline>Danger</button>
+      <button danger round>Danger</button>
     </p>
 
     <p>
-      <button light outline>Light</button>
+      <button light round>Light</button>
     </p>
 
     <p>
-      <button dark outline>Dark</button>
+      <button dark round>Dark</button>
     </p>
 
   </section>
 
+  <section id="floating-action-buttons" [ng-class]="{hidden: component.title !== 'Floating Action Buttons' }" class="section-padding">
+
+    <p>
+      <button fab fab-top fab-right>
+        <icon add></icon>
+      </button>
+    </p>
+
+  </section>
+  
+
   <section id="button-sizes" [ng-class]="{hidden: component.title !== 'Button Sizes' }" class="section-padding">
 
     <p>
@@ -173,6 +184,44 @@
 
   </section>
 
+  <section id="icon-buttons" [ng-class]="{hidden: component.title !== 'Icon Buttons' }" class="section-padding">
+
+    <p>
+      <button>
+        <icon home></icon>
+        Home
+      </button>
+    </p>
+
+    <p>
+      <button secondary>
+        <icon people></icon>
+        Friends
+      </button>
+    </p>
+
+    <p>
+      <button danger>
+        <icon close></icon>
+      </button>
+    </p>
+
+    <p>
+      <button light>
+        <icon arrow-back></icon>
+        Back
+      </button>
+    </p>
+
+    <p>
+      <button dark>
+        <icon hammer></icon>
+      </button>
+    </p>
+
+  </section>
+  
+
 
   <section id="cards" [ng-class]="{hidden: component.title !== 'Cards' }">
 
@@ -390,6 +439,12 @@
 
   </section>
 
+  <section id="popup" [ng-class]="{hidden: component.title !== 'Popups' }" class="section-padding">
+    <button block (click)="showPopup()">
+      Show Popup
+    </button>
+  </section>
+
   <section id="slides" [ng-class]="{hidden: component.title !== 'Slides' }">
 
    <ion-slides id="slider" style="background-color: black" pager="true" zoom="false" index="1" loop="true">
diff --git a/ionic/components/search-bar/modes/ios.scss b/ionic/components/search-bar/modes/ios.scss
index c9de313a5d..2e702ce67a 100644
--- a/ionic/components/search-bar/modes/ios.scss
+++ b/ionic/components/search-bar/modes/ios.scss
@@ -15,8 +15,8 @@ $search-bar-ios-input-height:             28px !default;
 $search-bar-ios-input-placeholder-color:  #9D9D9D !default;
 $search-bar-ios-input-text-color:         #000 !default;
 $search-bar-ios-input-background-color:   #FFFFFF !default;
-$search-bar-ios-input-transition:         all 0.3s cubic-bezier(.25, .45, .05, 1) !default;
-
+$search-bar-ios-input-transition:         all 0.3s linear !default;
+//cubic-bezier(.25, .45, .05, 1)
 $search-bar-ios-input-close-icon-color:   #8F8E94 !default;
 $search-bar-ios-input-close-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $search-bar-ios-input-close-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
 $search-bar-ios-input-close-icon-size:    17px !default;
@@ -80,20 +80,28 @@ $search-bar-ios-input-close-icon-size:    17px !default;
 .search-bar-input-container.left-align {
   .search-bar-search-icon {
     margin-left: 0;
-    transition: $search-bar-ios-input-transition;
   }
   .search-bar-input {
     padding-left: 28px;
-    transition: $search-bar-ios-input-transition;
   }
 }
 
-.search-bar-cancel.left-align {
+.search-bar-cancel {
   @extend button[clear];
-  display: block;
+  // transition: all 2s cubic-bezier(.25, .45, .05, 1);
+  transition: $search-bar-ios-input-transition;
+  transition-duration: 3s !important;
+  margin-right: calc(-100%);
+  // transform: translate3d(100px,0,0);
+  // max-width: 0;
+  min-height: 0;
+}
+
+.search-bar-cancel.left-align {
+  max-width: initial;
+  margin-right: 0;
   padding-left: 8px;
   padding-right: 0;
-  min-height: 0;
 }
 
 &.hairlines .search-bar {
diff --git a/ionic/components/search-bar/search-bar.scss b/ionic/components/search-bar/search-bar.scss
index 7bff42fe48..2d719af7e0 100644
--- a/ionic/components/search-bar/search-bar.scss
+++ b/ionic/components/search-bar/search-bar.scss
@@ -31,7 +31,3 @@ input[type="search"].search-bar-input {
   line-height: 3rem;
   @include appearance(none);
 }
-
-.search-bar-cancel {
-  display: none;
-}
diff --git a/ionic/components/search-bar/search-bar.ts b/ionic/components/search-bar/search-bar.ts
index f7c2105a5c..8d35137faa 100644
--- a/ionic/components/search-bar/search-bar.ts
+++ b/ionic/components/search-bar/search-bar.ts
@@ -25,10 +25,13 @@ import {ConfigComponent} from '../../config/decorators';
     'cancelText': 'Cancel',
     'placeholder': 'Search',
     'cancelAction': function() {
+      // TODO user will override this if they pass a function
+      // need to allow user to call these
       console.log('Default Cancel');
       this.isFocused = false;
       this.shouldLeftAlign = this.value.trim() != '';
-      // TODO input blur
+      this.element = this.elementRef.nativeElement.querySelector('input');
+      this.element.blur();
     }
   }
 })
diff --git a/ionic/components/search-bar/test/floating/index.ts b/ionic/components/search-bar/test/floating/index.ts
index 74a7a381c0..60bb186293 100644
--- a/ionic/components/search-bar/test/floating/index.ts
+++ b/ionic/components/search-bar/test/floating/index.ts
@@ -19,5 +19,6 @@ class IonicApp {
   }
   myCancelAction = function() {
     console.log('myCancelAction');
+    alert("My custom action!");
   }
 }