diff --git a/packages/core/src/components/alert/alert.ios.scss b/packages/core/src/components/alert/alert.ios.scss
index 30fea57ae5..490dff7375 100644
--- a/packages/core/src/components/alert/alert.ios.scss
+++ b/packages/core/src/components/alert/alert.ios.scss
@@ -6,6 +6,7 @@
 
 .alert-ios {
   font-family: $alert-ios-font-family;
+  font-size: $alert-ios-font-size;
 }
 
 .alert-ios .alert-wrapper {
diff --git a/packages/core/src/components/alert/alert.ios.vars.scss b/packages/core/src/components/alert/alert.ios.vars.scss
index 18b9ffe229..45152d1c00 100644
--- a/packages/core/src/components/alert/alert.ios.vars.scss
+++ b/packages/core/src/components/alert/alert.ios.vars.scss
@@ -8,6 +8,9 @@
 /// @prop - Font family of the alert
 $alert-ios-font-family:                         $font-family-ios-base !default;
 
+/// @prop - Font size of the alert
+$alert-ios-font-size:                           $font-size-ios-base !default;
+
 /// @prop - Max width of the alert
 $alert-ios-max-width:                           270px !default;
 
diff --git a/packages/core/src/components/alert/alert.md.scss b/packages/core/src/components/alert/alert.md.scss
index 91aa3460a7..946581afc7 100644
--- a/packages/core/src/components/alert/alert.md.scss
+++ b/packages/core/src/components/alert/alert.md.scss
@@ -6,6 +6,7 @@
 
 .alert-md {
   font-family: $alert-md-font-family;
+  font-size: $alert-md-font-size;
 }
 
 .alert-md .alert-wrapper {
@@ -29,6 +30,7 @@
 
 .alert-md .alert-title {
   font-size: $alert-md-title-font-size;
+  font-weight: $alert-md-title-font-weight;
 }
 
 .alert-md .alert-sub-title {
@@ -264,6 +266,6 @@
   background-color: $alert-md-button-background-color-activated;
 }
 
-.alert-md .alert-button .button-inner {
+.alert-md .alert-button-inner {
   justify-content: $alert-md-button-group-justify-content;
 }
diff --git a/packages/core/src/components/alert/alert.md.vars.scss b/packages/core/src/components/alert/alert.md.vars.scss
index b7b11d86bb..53b1a0cccb 100644
--- a/packages/core/src/components/alert/alert.md.vars.scss
+++ b/packages/core/src/components/alert/alert.md.vars.scss
@@ -8,6 +8,9 @@
 /// @prop - Font family of the alert
 $alert-md-font-family:                        $font-family-md-base !default;
 
+/// @prop - Font size of the alert
+$alert-md-font-size:                          $font-size-md-base !default;
+
 /// @prop - Max width of the alert
 $alert-md-max-width:                          280px !default;
 
@@ -41,6 +44,9 @@ $alert-md-head-text-align:                    start !default;
 /// @prop - Font size of the alert title
 $alert-md-title-font-size:                    22px !default;
 
+/// @prop - Font weight of the alert title
+$alert-md-title-font-weight:                  500 !default;
+
 /// @prop - Font size of the alert sub title
 $alert-md-sub-title-font-size:                16px !default;
 
diff --git a/packages/core/src/components/alert/alert.scss b/packages/core/src/components/alert/alert.scss
index 4124a88882..5dfcf53866 100644
--- a/packages/core/src/components/alert/alert.scss
+++ b/packages/core/src/components/alert/alert.scss
@@ -16,6 +16,9 @@ ion-alert {
   justify-content: center;
 
   contain: strict;
+
+  font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
 }
 
 ion-alert.alert-top {
@@ -24,10 +27,6 @@ ion-alert.alert-top {
   align-items: flex-start;
 }
 
-ion-alert input {
-  width: 100%;
-}
-
 .alert-wrapper {
   z-index: $z-index-overlay-wrapper;
   display: flex;
@@ -58,13 +57,21 @@ ion-alert input {
   overflow-y: scroll;
 
   -webkit-overflow-scrolling: touch;
+
+  box-sizing: border-box;
 }
 
 .alert-input {
   @include padding(10px, 0);
 
+  width: 100%;
+
   border: 0;
   background: inherit;
+
+  font: inherit;
+
+  box-sizing: border-box;
 }
 
 .alert-button-group {
@@ -92,12 +99,26 @@ ion-alert input {
   line-height: $alert-button-line-height;
 }
 
+.alert-button-inner {
+  display: flex;
+
+  flex-flow: row nowrap;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+}
+
 .alert-tappable {
   @include text-align(start);
   @include appearance(none);
   @include margin(0);
   @include padding(0);
 
+  border: 0;
+
   width: 100%;
 
   font-size: inherit;
@@ -115,3 +136,9 @@ ion-alert input {
     outline: none;
   }
 }
+
+.alert-radio-icon,
+.alert-checkbox-icon,
+.alert-checkbox-inner {
+  box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/packages/core/src/components/alert/alert.tsx b/packages/core/src/components/alert/alert.tsx
index 7cdbbda727..2eb6fa6ae2 100644
--- a/packages/core/src/components/alert/alert.tsx
+++ b/packages/core/src/components/alert/alert.tsx
@@ -293,7 +293,7 @@ export class Alert {
       <div class='alert-checkbox-group'>
         { inputs.map((i, index) => (
           <button onClick={() => this.cbClick(index)} aria-checked={i.checked} id={i.id} disabled={i.disabled} tabIndex={0} role='checkbox' class='alert-tappable alert-checkbox alert-checkbox-button'>
-            <div class='button-inner'>
+            <div class='alert-button-inner'>
               <div class='alert-checkbox-icon'><div class='alert-checkbox-inner'></div></div>
               <div class='alert-checkbox-label'>
                 {i.label}
@@ -312,7 +312,7 @@ export class Alert {
       <div class='alert-radio-group' role='radiogroup' aria-labelledby={this.hdrId} aria-activedescendant={this.activeId}>
         { inputs.map((i, index) => (
           <button onClick={() => this.rbClick(index)} aria-checked={i.checked} disabled={i.disabled} id={i.id} tabIndex={0} class='alert-radio-button alert-tappable alert-radio' role='radio'>
-            <div class='button-inner'>
+            <div class='alert-button-inner'>
               <div class='alert-radio-icon'><div class='alert-radio-inner'></div></div>
               <div class='alert-radio-label'>
                 {i.label}
@@ -442,7 +442,7 @@ export class Alert {
         <div class={alertButtonGroupClass}>
           {buttons.map(b =>
             <button class={buttonClass(b)} tabIndex={0} onClick={() => this.buttonClick(b)}>
-              <span class='button-inner'>
+              <span class='alert-button-inner'>
                 {b.text}
               </span>
             </button>
diff --git a/packages/core/src/components/alert/test/standalone/index.html b/packages/core/src/components/alert/test/standalone/index.html
index 6b592893cd..8974cb9433 100644
--- a/packages/core/src/components/alert/test/standalone/index.html
+++ b/packages/core/src/components/alert/test/standalone/index.html
@@ -9,11 +9,36 @@
 </head>
 
 <body>
-  <ion-button id="basic" expand="block" onclick="presentAlert()">Alert</ion-button>
+  <button id="basic" onclick="presentAlert()">Alert</button>
+  <button id="longMessage" onclick="presentAlertLongMessage()">Alert Long Message</button>
+  <button id="multipleButtons" onclick="presentAlertMultipleButtons()">Multiple Buttons (>2)</button>
+  <button id="noMessage" onclick="presentAlertNoMessage()">Alert No Message</button>
+  <button id="confirm" onclick="presentAlertConfirm()">Confirm</button>
+  <button id="prompt" onclick="presentAlertPrompt()">Prompt</button>
+  <button id="radio" onclick="presentAlertRadio()">Radio</button>
+  <button id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
+  <button onclick="presentWithCssClass()">CssClass</button>
 
   <ion-alert-controller></ion-alert-controller>
 
+  <style>
+    body > button {
+      display: block;
+      clear: both;
+      width: 100%;
+      padding: 12px 8px;
+      font-size: 1em;
+      background: #f8f8f8;
+      border: 1px solid #eee;
+      border-radius: 4px;
+      margin-bottom: 8px;
+    }
+  </style>
+
   <script>
+    window.addEventListener('ionAlertDidDismiss', function(e){console.log('didDismiss', e)})
+    window.addEventListener('ionAlertWillDismiss', function(e){console.log('willDismiss', e)})
+
     async function presentAlert() {
       var alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();
@@ -25,7 +50,269 @@
       });
       return await alert.present();
     }
-  </script>
+
+    async function presentAlertLongMessage() {
+      var alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Alert',
+        message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
+        buttons: ['Cancel', 'OK']
+      });
+      return await alert.present();
+    }
+
+    async function presentAlertMultipleButtons() {
+      var alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Alert',
+        subTitle: 'Subtitle',
+        message: 'This is an alert message.',
+        buttons: ['Cancel', 'Open Modal', 'Delete']
+      });
+      return await alert.present();
+    }
+
+    async function presentAlertNoMessage() {
+      var alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Alert',
+        buttons: ['OK']
+      });
+      return await alert.present();
+    }
+
+    async function presentAlertConfirm() {
+      var alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Confirm!',
+        message: 'Message <strong>text</strong>!!!',
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            cssClass: 'secondary',
+            handler: (blah) => {
+              console.log('Confirm Cancel: blah');
+            }
+          }, {
+            text: 'Okay',
+            handler: () => {
+              console.log('Confirm Okay')
+            }
+          }
+        ]
+      });
+      return await alert.present();
+    }
+
+    async function presentAlertPrompt() {
+      var alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Prompt!',
+        inputs: [
+          {
+            placeholder: 'Placeholder 1'
+          },
+          {
+            name: 'name2',
+            id: 'name2-id',
+            value: 'hello',
+            placeholder: 'Placeholder 2'
+          },
+          {
+            name: 'name3',
+            value: 'http://ionicframework.com',
+            type: 'url',
+            placeholder: 'Favorite site ever'
+          },
+          // input date with min & max
+          {
+            name: 'name4',
+            type: 'date',
+            min: '2017-03-01',
+            max: '2018-01-12'
+          },
+          // input date without min nor max
+          {
+            name: 'name5',
+            type: 'date'
+          },
+          {
+            name: 'name6',
+            type: 'number',
+            min: -5,
+            max: 10
+          },
+          {
+            name: 'name7',
+            type: 'number'
+          }
+        ],
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            cssClass: 'secondary',
+            handler: () => {
+              console.log('Confirm Cancel')
+            }
+          }, {
+            text: 'Ok',
+            handler: () => {
+              console.log('Confirm Ok')
+            }
+          }
+        ]
+      });
+      return await alert.present();
+    }
+
+    async function presentAlertRadio() {
+      var alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Radio',
+        inputs: [
+          {
+            type: 'radio',
+            label: 'Radio 1',
+            value: 'value1',
+            checked: true
+          },
+          {
+            type: 'radio',
+            label: 'Radio 2',
+            value: 'value2'
+          },
+          {
+            type: 'radio',
+            label: 'Radio 3',
+            value: 'value3'
+          },
+          {
+            type: 'radio',
+            label: 'Radio 4',
+            value: 'value4'
+          },
+          {
+            type: 'radio',
+            label: 'Radio 5',
+            value: 'value5'
+          },
+          {
+            type: 'radio',
+            label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
+            value: 'value6'
+          }
+        ],
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            cssClass: 'secondary',
+            handler: () => {
+              console.log('Confirm Cancel')
+            }
+          }, {
+            text: 'Ok',
+            handler: () => {
+              console.log('Confirm Ok')
+            }
+          }
+        ]
+      });
+      return await alert.present();
+    }
+
+    async function presentAlertCheckbox() {
+
+
+      var alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Checkbox',
+        inputs: [
+          {
+            type: 'checkbox',
+            label: 'Checkbox 1',
+            value: 'value1',
+            checked: true
+          },
+
+          {
+            type: 'checkbox',
+            label: 'Checkbox 2',
+            value: 'value2'
+          },
+
+          {
+            type: 'checkbox',
+            label: 'Checkbox 3',
+            value: 'value3'
+          },
+
+          {
+            type: 'checkbox',
+            label: 'Checkbox 4',
+            value: 'value4'
+          },
+
+          {
+            type: 'checkbox',
+            label: 'Checkbox 5',
+            value: 'value5'
+          },
+
+          {
+            type: 'checkbox',
+            label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
+            value: 'value6'
+          }
+        ],
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            cssClass: 'secondary',
+            handler: () => {
+              console.log('Confirm Cancel')
+            }
+          }, {
+            text: 'Ok',
+            handler: () => {
+              console.log('Confirm Ok')
+            }
+          }
+        ]
+      });
+      return await alert.present();
+    }
+
+    async function presentWithCssClass() {
+      var alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Alert',
+        subTitle: 'Subtitle',
+        cssClass: 'my-class my-customClass   ',
+        message: 'This is an alert message.',
+        buttons: [ {
+            text: 'Ok',
+            cssClass: 'my-class my-customClass   ',
+            handler: () => {
+              console.log('Confirm Ok')
+            }
+          }]
+      });
+      return await alert.present();
+    }
+
+</script>
 </body>
 
 </html>