A Clash Royale styled toast notification for Polymer 2.

[ This description is mirrored from README.md at github.com/Dabolus/cr-toast on 2019-05-22 ]


A Clash Royale styled toast notification for Polymer 2.

Only one cr-toast at a time will be visible on screen.

Use opened to show the toast:


<cr-toast text="Hello world!" opened></cr-toast>

Also open() or show() can be used to show the toast:


<cr-button on-click="openToast">Open Toast</cr-button>
<cr-toast id="toast" text="Hello world!"></cr-toast>


openToast: function() {

Set duration to 0, a negative number or Infinity to persist the toast on screen:


<cr-toast text="Terms and conditions" opened duration="0">
  <a href="#">Show more</a>

This element applies the mixin --sc-ccbackbeat but does not import cr-fonts/cr-fonts.html. In order to apply the SC CCBackBeat font to this element, make sure you've imported cr-fonts/cr-fonts.html.


Link to this version
ImportedReleased 21 October 2017MIT License
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save Dabolus/cr-toast"#2.0.0"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 2.0.0


  • polymer#Polymer/polymer#^2.0.0
  • iron-overlay-behavior#PolymerElements/iron-overlay-behavior#^2.0.0