diff --git a/ionic/components/search-bar/modes/ios.scss b/ionic/components/search-bar/modes/ios.scss
index 8fb05a19df..c9de313a5d 100644
--- a/ionic/components/search-bar/modes/ios.scss
+++ b/ionic/components/search-bar/modes/ios.scss
@@ -33,15 +33,15 @@ $search-bar-ios-input-close-icon-size:    17px !default;
   width: $search-bar-ios-input-search-icon-size + 1;
   height: $search-bar-ios-input-search-icon-size + 1;
 
-  @include calc(margin-left, "50% - 60px");
-  transition: $search-bar-ios-input-transition;
-
   @include svg-background-image($search-bar-ios-input-search-icon-svg);
   background-size: $search-bar-ios-input-search-icon-size;
   background-repeat: no-repeat;
   position: absolute;
   left: 10px;
   top: 8px;
+
+  @include calc(margin-left, "50% - 60px");
+  transition: $search-bar-ios-input-transition;
 }
 
 .search-bar-input {
@@ -57,13 +57,12 @@ $search-bar-ios-input-close-icon-size:    17px !default;
   background-repeat: no-repeat;
   background-position: 8px center;
 
-  transition: $search-bar-ios-input-transition;
-
   &::placeholder {
     color: $search-bar-ios-input-placeholder-color;
   }
 
   @include calc(padding-left, "50% - 28px");
+  transition: $search-bar-ios-input-transition;
 }
 
 .search-bar-close-icon {
@@ -89,6 +88,14 @@ $search-bar-ios-input-close-icon-size:    17px !default;
   }
 }
 
+.search-bar-cancel.left-align {
+  @extend button[clear];
+  display: block;
+  padding-left: 8px;
+  padding-right: 0;
+  min-height: 0;
+}
+
 &.hairlines .search-bar {
   border-bottom-width: 0.55px;
 }
diff --git a/ionic/components/search-bar/search-bar.ts b/ionic/components/search-bar/search-bar.ts
index ddd1e9b41a..1c2c6c4b94 100644
--- a/ionic/components/search-bar/search-bar.ts
+++ b/ionic/components/search-bar/search-bar.ts
@@ -23,6 +23,7 @@ import {IonicComponent, IonicView} from '../../config/decorators';
     'query'
   ],
   defaultProperties: {
+    'showCancel': false,
     'cancelText': 'Cancel',
     'placeholder': 'Search'
   }
@@ -35,7 +36,7 @@ import {IonicComponent, IonicView} from '../../config/decorators';
     (input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder">
     <div class="search-bar-close-icon"></div>
   </div>
-  <button class="search-bar-cancel">{{cancelText}}</button>`
+  <button *ng-if="showCancel" class="search-bar-cancel" [class.left-align]="shouldLeftAlign">{{cancelText}}</button>`
 })
 export class SearchBar extends Ion {
   /**
diff --git a/ionic/components/search-bar/test/floating/main.html b/ionic/components/search-bar/test/floating/main.html
index 0f7912fd4f..18f49f9b41 100644
--- a/ionic/components/search-bar/test/floating/main.html
+++ b/ionic/components/search-bar/test/floating/main.html
@@ -5,9 +5,13 @@
 </ion-toolbar> -->
 <ion-content>
   <form [ng-form-model]="form">
-    <label> Default Search </label>
+    <label> Search - Default </label>
     <ion-search-bar ng-control="searchQuery" class="e2eFloatingSearchBar"></ion-search-bar>
-    <label> Placeholder Search </label>
+    <label> Search - Custom Placeholder </label>
     <ion-search-bar ng-control="searchQuery" placeholder="Filter"></ion-search-bar>
+    <label> Search - Cancel Button </label>
+    <ion-search-bar ng-control="searchQuery" show-cancel="true"></ion-search-bar>
+    <label> Search - Custom Cancel Button </label>
+    <ion-search-bar ng-control="searchQuery" show-cancel="true" cancel-text="Done"></ion-search-bar>
   </form>
 </ion-content>