diff --git a/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.html b/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.html
--- a/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.html
+++ b/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.html
@@ -6,7 +6,13 @@
         <style include="shared-styles"></style>
         <link rel="stylesheet" href="rhodecode-toast.css">
 
-        <paper-toast id="p-toast" duration="0"  horizontal-offset="100" horizontal-align="auto" vertical-align="top" always-on-top>
+        <paper-toast id="p-toast"
+                     duration="0"
+                     horizontal-offset="100"
+                     horizontal-align="auto"
+                     vertical-align="top"
+                     on-iron-overlay-closed="handleClosed"
+                     always-on-top>
             <div class="toast-message-holder">
                 <template is="dom-repeat" items="{{toasts}}">
                     <div class$="alert alert-{{item.level}}">
@@ -15,7 +21,7 @@
                 </template>
             </div>
             <div class="toast-close">
-                <paper-button on-tap="dismissNotifications" class="btn btn-default">{{_gettext('Close now')}}</paper-button>
+                <button on-tap="dismissNotifications" class="btn btn-default">{{_gettext('Close now')}}</button>
             </div>
         </paper-toast>
     </template>
diff --git a/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.js b/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.js
--- a/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.js
+++ b/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.js
@@ -20,6 +20,8 @@ Polymer({
     },
     dismissNotifications: function(){
         this.$['p-toast'].close();
+    },
+    handleClosed: function(){
         this.splice('toasts', 0);
     },
     open: function(){