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/template-element

Use as a module in your application:

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

License

MIT