Bulma Toast Example

Example of the bulma toast system

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.2/css/bulma.min.css">
<script src="https://www.npmjs.com/package/bulma-toast"></script>
<html>
  <head>
    <script src="https://unpkg.com/bulma-toast"></script>
    <script>
      const quotes = [
        'Help me, Obi-Wan Kenobi. You’re my only hope.',
        'I find your lack of faith disturbing.',
        'The Force will be with you. Always.',
        'Why, you stuck-up, half-witted, scruffy-looking nerf herder!',
        'Never tell me the odds!',
        'Do. Or do not. There is no try.',
        'No. I am your father.',
        'Now, young Skywalker, you will die.',
        'Just for once, let me look on you with my own eyes.',
        'There’s always a bigger fish.',
        'In time, the suffering of your people will persuade you to see our point of view.',
        'You can’t stop the change, any more than you can stop the suns from setting.',
        'Fear is the path to the dark side. Fear leads to anger; anger leads to hate; hate leads to suffering. I sense much fear in you.',
      ]
      const types = [
        'is-primary',
        'is-link',
        'is-info',
        'is-success',
        'is-warning',
        'is-danger',
      ]
      const buttons = document.querySelectorAll('.hero-body button')
      const toast = document.querySelector('.toast')
      function displayToast(position) {
        bulmaToast.toast({
          message: quotes[Math.floor(quotes.length * Math.random())],
          type: types[Math.floor(types.length * Math.random())],
          position: position.toLowerCase().replace(' ', '-'),
          dismissible: true,
          duration: 10000,
          pauseOnHover: true,
        })
      }
    </script>
  </head>
  <body>
    <div>
      <button class="button is-primary" onclick="displayToast('Top Right')">
        Top Right
      </button>
      <button class="button is-primary" onclick="displayToast('Bottom Left')">
        Bottom Left
     ...