Sticky alerts (Toasts) (Requires JavaScript)

Sticky alerts or toasts are alerts that stick to the top right of the page, and are only displayed for a few seconds. They can be used to show notifications to users, for example, when a user submits a form, etc.

<div class="page-wrapper">
  <!-- This parent container is required -->
  <div class="sticky-alerts"></div>

  <!-- Content wrapper containing the toggles -->
  <div class="content-wrapper">
    ...
    <button class="btn" type="button" onclick="toastAlert()">Toast alert!</button>
    <button class="btn btn-link" type="button" onclick="toastAnotherAlert()">Toast another!</button>
    ...
  </div>
</div>

<!-- Requires halfmoon.js -->
<script src="path/to/halfmoon.js"></script>

<!-- JavaScript -->
<script type="text/javascript">
  // Toasts a default alert
  function toastAlert() {
    var alertContent = "This is a default alert with <a href='#' class='alert-link'>a link</a> being toasted.";
    // Built-in function
    halfmoon.initStickyAlert({
      content: alertContent,      // Required, main content of the alert, type: string (can contain HTML)
      title: "Default alert"      // Optional, title of the alert, default: "", type: string
    })
  }
  
  // Toasts another alert (here, the options are shown)
  function toastAnotherAlert() {
    var alertContent = "This is another alert with <a href='#' class='alert-link'>a link</a> being toasted.";
    // Built-in function
    halfmoon.initStickyAlert({
      content: alertContent,      // Required, main content of the alert, type: string (can contain HTML)
      title: "Another alert",     // Optional, title of the alert, default: "", type: string
      alertType: "",              // Optional, type of the alert, default: "", must be "alert-primary" || "alert-success" || "alert-secondary" || "alert-danger"
      fillType: "",               // Optional, fill type of the alert, default: "", must be "filled-lm" || "filled-dm" || "filled"
      hasDismissButton: true,     // Optional, the alert will contain the close button if true, default: true, type: boolean
      timeShown: 5000             // Optional, time the alert stays on the screen (in ms), default: 5000, type: number
    })
  }
</script>

How it works

Here's a list of things to understand about toasts in Halfmoon.

  • A container with the class .sticky-alerts must be placed inside the page wrapper (.page-wrapper). You can learn more about this in the page building section (opens in new tab) of the docs.
  • The built-in method halfmoon.initStickyAlert({...}) can obviously be called directly. The functions that have been created in the above example is to show the options in the parameter.

More examples #

Given below are more examples of toasts using various combinations of the options.

<div class="page-wrapper">
  <!-- This parent container is required -->
  <div class="sticky-alerts"></div>

  <!-- Content wrapper containing the toggles -->
  <div class="content-wrapper">
    ...
    <button class="btn btn-primary" type="button" onclick="toastPrimaryAlert()">Primary</button>
    <button class="btn btn-success" type="button" onclick="toastSuccessAlert()">Success</button>
    <button class="btn btn-secondary" type="button" onclick="toastSecondaryAlert()">Secondary</button>
    <button class="btn btn-danger" type="button" onclick="toastDangerAlert()">Danger</button>
    ...
  </div>
</div>

<!-- Requires halfmoon.js -->
<script src="path/to/halfmoon.js"></script>

<!-- JavaScript -->
<script type="text/javascript">
  // Toasts primary alert
  function toastPrimaryAlert() {
    halfmoon.initStickyAlert({
      content: "This is a primary alert without a close button, that will stay up for 10 seconds.",
      title: "Primary alert",
      alertType: "alert-primary",
      hasDismissButton: false,
      timeShown: 10000
    });
  }
  
  // Toasts success alert
  function toastSuccessAlert() {
    halfmoon.initStickyAlert({
      content: "This is a success alert that will be filled only in light mode.",
      title: "Success alert",
      alertType: "alert-success",
      fillType: "filled-lm"
    });
  }
  
  // Toasts secondary alert
  function toastSecondaryAlert() {
    halfmoon.initStickyAlert({
      content: "This is a secondary alert that will be filled only in dark mode.",
      title: "Secondary alert",
      alertType: "alert-secondary",
      fillType: "filled-dm"
    });
  }
  
  // Toasts danger alert
  function toastDangerAlert() {
    halfmoon.initStickyAlert({
      content: "This is a danger alert that will be always filled.",
      title: "Danger alert",
      alertType: "alert-danger",
      fillType: "filled"
    });
  }
</script>

Toasting a precompiled alert #

Sometimes it can be really useful to toast a precompiled alert. This is because precompiled alerts can be designed with much more complexity in mind. This can be done by placing the alert in the sticky alerts section, and simply calling the built-in halfmoon.toastAlert(alertId) method. Given below is an example of toasting a precompiled alert with an old-school table layout.

<div class="page-wrapper">
  <!-- Sticky alerts containing the precompiled alert -->
  <div class="sticky-alerts">
    <!-- Precompiled alert with a complex design -->
    <div class="alert alert-primary filled" role="alert" id="precompiled-alert-1">
      <table>
        <tbody>
          <tr>
            <td>
              <div class="w-50 h-50 d-flex align-items-center rounded-circle bg-white"> <!-- w-50 = width: 5rem (50px), h-50 = height: 5rem (50px), d-flex = display: flex, align-items-center = align-items: center, rounded-circle = border-radius: 50%, bg-white = background-color: white -->
                <div class="m-auto text-primary"> <!-- m-auto = margin: auto, text-primary = color: primary-color -->
                  <i class="fa fa-commenting fa-2x" aria-hidden="true"></i>
                  <span class="sr-only">Commenting</span> <!-- sr-only = only for screen readers -->
                </div>
              </div>
            </td>
            <td class="pl-20">
              <h4 class="alert-heading mb-5">New message!</h4> <!-- mb-5 = margin-bottom: 0.5rem (5px) -->
              <div>
                Jane Doe just sent you a new message.
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- Content wrapper containing the toggle -->
  <div class="content-wrapper">
    ...
    <button class="btn btn-primary" type="button" onclick="halfmoon.toastAlert('precompiled-alert-1', 7500)">Toast!</button>
    ...
  </div>
</div>

<!-- Requires halfmoon.js -->
<script src="path/to/halfmoon.js"></script>

Please note the second parameter of the halfmoon.toastAlert(...) method, which is the time shown. This parameter is optional. Here, it is set to 7500, so the alert stays up for 7.5 seconds. By default, this is set to 5000, or 5 seconds.

Also note that the icon being used is part of the Font Awesome 4.7.0 iconset.


Up next: Tooltips

Coming soon

  • More components
  • More variables and customization
  • Form builder and validator JS
  • Themes and templates

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.