1.87 KB

Build status

Demo and API docs


Material design: Snackbards & toasts

paper-toast provides a subtle notification toast. Only one paper-toast will be visible on screen.

Use opened to show the toast:


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

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


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


openToast: function() {

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


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


The following custom properties and mixins are available for styling:

Custom property Description Default
--paper-toast-background-color The paper-toast background-color #323232
--paper-toast-color The paper-toast color #f1f1f1

This element applies the mixin --paper-font-common-base but does not import paper-styles/typography.html. In order to apply the Roboto font to this element, make sure you've imported paper-styles/typography.html.