Demo

Here's the simplest functionality. Click on those buttons to see Notifier in action:



btnBasicToast.addEventListener('click', () =>
                                                                // Target is the clicked button in the toast
  Notifier.showToast('Hey!', { btnText: 'Hello', btnFunction: e => e.target.parentElement.close() })
);

btnBasicDialog.addEventListener('click', () =>
  Notifier.showDialog('Hello world!', 'Look at this beautiful demo')
);
    

Here you can witness a pre-formatted dialog:



btnFormattedDialog.addEventListener('click', () =>
  Notifier.showDialog('I\'m so well formatted', `
    <paper-dialog-scrollable>
      Such a nice content here.
      <hr noshadow>
      And there's even our banner!
      <img src="banner.png">
    </paper-dialog-scrollable>
    <div class="buttons">
      <paper-button class="first">First, lol</paper-button>
      <paper-button dialog-dismiss>Meh</paper-button>
      <paper-button autofocus dialog-confirm>I'm amazed</paper-button>
    </div>
  `, {
    attributes: {
      id: 'formatted-dialog'
    },
    formatted: true
  })
);
    

#formatted-dialog .first {
  margin-right: auto;
}
    

And at the end you can see shortcut method for question dialog:



btnQuestionDialog.addEventListener('click', () =>
  Notifier.askDialog('Do you like me?')
);