HTMX Toasts Element

This is a simple HTMX element that can be used to display toasts in your web application.

Usage

<template id="htmx-toasts-template">
  <div class="alert" slot="alert">
    <span slot="message"></span>
    <button type="button" class="btn btn-sm btn-outline" aria-label="Close" slot="close">Close</button>
  </div>
</template>
<htmx-toasts
  timeout="3000"
  class="toast"
  role="status"
  aria-live="polite"
  error-class="alert-error"
  info-class="alert-info"
  warn-class="alert-warning"></htmx-toasts>

Attributes

• timeout - The time in milliseconds that the toast will be displayed.
• error-class - The class to apply to the toast when it is an error.
• info-class - The class to apply to the toast when it is an info message.
• warn-class - The class to apply to the toast when it is a warning.

Installation

npm install @htmx/htmx-toast

Use as a module in your application:

<script src="https://unpkg.com/@htmx/htmx-toasts@latest/dist/index.js" type="module"></script>

License

MIT